Angular ngFor 没有 let item of items 语法

Posted 2023-03-13

【中文标题】Angular ngFor 没有 let item of items 语法

【英文标题】：Angular ngFor without the let item of items syntax

【发布时间】：2020-12-18 00:32:16

【问题描述】：

我是 Angular 的新手，我只是想了解我是否可以在没有 let 项目的情况下使用 ngFor 指令；让 i = 索引语法

在使用 ngFor 时迭代数组时有没有其他方法可以获取索引

我的示例应用

<div *ngFor="let oddNumber of oddNumbers; let i = index">
   <app-odd *ngIf="oddNumbers[i]" [number]="oddNumbers[i]"></app-odd>
   <app-even *ngIf="evenNumbers[i]" [number]="evenNumbers[i]"></app-even>
</div>

【参考方案1】：

在内部，微语法 *ngFor 扩展为通常的绑定语法 [ngForOf]。

例如。

<div *ngFor="let oddNumber of oddNumbers; let i = index">
  ...
</div>

扩展为

<ng-template ngFor let-oddNumber [ngForOf]="oddNumbers" let-i="index">
  <div>...</div>
</ng-template>

没有let oddNumber of oddNumbers，let-i="index" 没有任何上下文。因此，如果没有 let oddNumber of oddNumbers 输入，就无法使用 *ngFor 指令。

但是，如果您只想访问循环中的奇数或偶数项，*ngFor 具有布尔局部变量，例如 odd 和 even，类似于 index。

<div *ngFor="let item of items; let i=index; let even=even; let odd=odd">
  <ng-container *ngIf="even">
    <!-- item in even position -->
    ...
  </ng-container>
  <ng-container *ngIf="odd">
    <!-- item in odd position -->
    ...
  </ng-container>
</div>

【参考方案2】：

似乎这是在 html 文件中保存每个数组项的索引的正确方法：ngFor with index as value in attribute

但是如果你正在寻找其他方法来保存索引，你可以尝试遍历 Ts 文件中的数组，然后根据索引号执行所需的操作。