Question

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

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

Answer 1

您无法创建局部变量。有时您可以获取我们正在迭代的数组中的项的索引。您可以通过向我们的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;
}

Answer 2

您可以将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 3

无法在*ngFor内创建自定义局部变量，只能使用the 8 built-in ones。

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

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

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

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

<div *ngFor="let user of users; let i = index" (click)="counter[i] = counter[i] + 1">
   User clicked {{counter[i]}} times.
</div>

Working demo on stackblitz。

在* ngFor中创建局部变量

3 个答案: