Question

我在Angular中遇到ngIf问题。因此，基本上我想实现一个通知系统，以通知用户缺少哪些字段。这是该问题的解答：https://stackblitz.com/edit/angular-behnqj
重现：
1.首先选择车辆类型“ plane”，此处一切正确，消除了第一个错误，第二个错误的索引为1。
2.现在刷新stackblitz预览页面，这次选择车辆类型“ car”，我们现在可以看到第一个错误已消除，但第二个错误的索引仍为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>

希望有帮助。

有序列表索引未正确更新

1 个答案: