Angular中能否在*ngFor指令内创建局部变量？

嘿，关于你问的*ngFor里能不能创建局部变量的问题，我来给你掰扯清楚：

首先明确说：Angular的*ngFor支持局部变量，但不是你示例里那种直接赋值固定值的方式。它有一套预定义的内置局部变量可以直接用，而自定义变量需要用点小技巧来实现。

一、*ngFor 支持的内置局部变量 #

这些是Angular官方提供的，直接就能在*ngFor的语法里声明使用：

• index：当前循环项的索引，从0开始计数
• first：布尔值，标记当前项是否是循环的第一项
• last：布尔值，标记当前项是否是循环的最后一项
• even：布尔值，标记当前项的索引是否为偶数
• odd：布尔值，标记当前项的索引是否为奇数

举个实际用法的例子：

<div *ngFor="let user of users; let i = index; let isFirst = first; let isEven = even">
  第{{i+1}}个用户：{{user.name}} 
  <span *ngIf="isFirst">(这是第一个用户)</span>
  <span *ngIf="isEven">(索引是偶数)</span>
</div>

二、你的示例写法为什么不行？ #

你写的 <div *ngFor="let user of users; let myVariable = 0"> 是不合法的，因为*ngFor的语法规则里，局部变量只能绑定到它提供的那些内置变量，或者通过特定方式关联到组件/模板里的其他值，不能直接赋值一个固定的字面量（比如0）。

三、如何实现自定义局部变量的效果？ #

如果确实需要在*ngFor循环里使用一个自定义的局部变量，可以试试这两种方法：

方法1：在组件类里预处理数据 #

把需要的变量提前加到循环的数据源里，比如：

// 组件类里的代码
this.users = this.users.map((user, idx) => {
  return {
    ...user,
    myVariable: 0, // 这里给每个用户添加自定义变量
    customIndex: idx + 1
  };
});

然后在模板里直接用：

<div *ngFor="let user of users">
  {{user.name}} - 自定义变量值：{{user.myVariable}}
</div>

方法2：用ng-container结合ngIf的as语法 #

利用ngIf可以把值赋值给局部变量的特性，在*ngFor的循环内部创建局部变量：

<ng-container *ngFor="let user of users">
  <!-- 用ngIf把0赋值给myVariable，as语法会创建局部变量 -->
  <ng-container *ngIf="0 as myVariable">
    <div>{{user.name}} - 自定义变量：{{myVariable}}</div>
    <!-- 这里可以直接使用myVariable，它的作用域就是当前循环项 -->
  </ng-container>
</ng-container>

这样就能在每个循环项的范围内使用自定义的局部变量了～

内容的提问来源于stack exchange，提问作者Stack Over