在 *ngFor 中创建局部变量

Question

是否可以在 *ngFor 中创建局部变量？例如：

<div *ngFor="let user of users; let myVariable = 0">

Answer 1

您可以将 ng-container 与 ngIf 结合使用来实现此目的。

<div class="message-list">
  <ng-container *ngFor="let message of messages">
    <ng-container
      *ngIf="{
        isCurrentUser: message.createdBy.email === currentUser.email
      } as locals"
    >
      <div
        class="message"
        [ngClass]="{ 'message--right-aligned': locals.isCurrentUser }"
      >
        <div>{{ message.text }}</div>
        <div [ngClass]="{ bold: !locals.isCurrentUser }">
          {{ message.createdBy.name }}
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>

Answer 2

无法在 内部创建自定义局部变量*ngFor，只能使用8 个内置变量。

您可以通过在组件类中创建一个数组并在模板中引用它来解决此限制。您没有指定您的用例，所以让我们假设您想要的是一个计数器，当用户单击 时该计数器会递增div。

counter在您的组件中，您可以使用其初始值创建数组：

counter = this.users.map(u => 0);

您可以在模板中引用它，使用 的索引*ngFor来识别数组的正确元素。

counter = this.users.map(u => 0);

stackblitz 上的工作演示。

Answer 3

您无法创建局部变量。有时您可以获得我们正在迭代的数组中项目的索引。您可以通过向 ngFor 表达式添加另一个变量并使其等于索引来做到这一点，如下所示：

<ul>
   <li *ngFor="let user of users; let i = index">
   {{ i + 1 }} - {{ user.name }}
   </li>
</ul>

如果您的组件中需要变量，则需要在使用它之前在组件类中创建它。例如：

@Component({
  selector: 'ngfor-example',
  template: `<h4>NgFor</h4>
 <ul>
   <li *ngFor="let user of users">
     {{ variable }} - {{ person.name }}
   </li>
 </ul>`
})
class NgForExampleComponent {
   variable = 0;
}