Question

我还没有找到任何重构我的ngFor循环的例子。这是我从angular 2 beta.08开始的循环

  <template ngFor #row [ngForOf]="filterRows">

Answer 1

请参阅NgFor的API页面：

<li *ngFor="let row of filterRows; let i = index">...</li> `

<li template="ngFor let row of filterRows; let i = index">...</li>`

<dl>
   <template ngFor let-row [ngForOf]="filterRows" let-i="index">
      <dt>...</dt>
      <dd>...</dd>
   </template>
</dl>`

注意最后一个表单如何允许重复多个元素。

Answer 2

您可以使用<ng-container>：

<dl class="summary-items">
    <ng-container *ngFor="let resource of resources">
      <ng-container *ngIf="items[resource.id]>0">
        <dt class="key"><strong>{{resource.title}}:</strong></dt>
        <dd class="value">{{items[resource.id]}}</dd>
      </ng-container>
    </ng-container>
</dl>

请注意嵌套 <ng-container>元素的使用;您可以在任何适合的地方使用它们来创建新的模板上下文，而不会使用诸如<div> s等免费元素来混淆您的HTML。

Answer 3

我无法理解你的问题，但只是为了更新较新的Angular版本（4）有这个sintax：

  <ion-item-group *ngFor="let data of contraCheque; index as i">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider>
  </ion-item-group>

我以Ionic 2为例，但最重要的部分是：

*ngFor="let data of contraCheque; index as i"

我应该如何重构<template>中的ngFor循环？

3 个答案: