有序列表索引未正确更新

Question

我在Angular中遇到了ngIf的问题。所以基本上我想实现一个通知系统来通知用户缺少哪些字段。这是问题的stackblitz：https://stackblitz.com/edit/angular-behnqj 重现： 1.首先选择车辆类型'飞机'，这里一切正确，第一个错误被删除，第二个错误保留索引= 1。 2.现在刷新stackblitz预览网页，这次选择车辆类型'car'，我们现在可以看到第一个错误被删除但第二个错误仍然是index = 2。

通过一些调试，我得知如果我在ngIf中的条件之间进行交换并执行类似的操作

<ng-container *ngIf="selectedVehicleType === 'plane'; else carsOptions">
      <option *ngFor="let plane of planes; let i=index" [value]="plane" [selected]="plane === selectedVehicle" [hidden]="i===0"> {{plane}}</option>

    </ng-container>
  </select>

  <ng-template #carsOptions>
    <option *ngFor="let car of cars; let i=index" [value]="car" [selected]="car === selectedVehicle" [hidden]="i===0" > {{car}}</option>
  </ng-template>

这将导致同样的问题，但这次问题发生在我们选择'飞机'而不是'汽车'时。

Answer 1

改变它，它会工作:)

<div class="content">
        <span>errors:</span>
        <ul style="list-style: none;">
          <li *ngFor="let error of errors; let i=index;"> {{(i+1)+ ". "+error}}</li>
        </ul>
      </div>

希望能帮助到你。