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

Question

我还没有找到任何应该如何重构我的 ngFor 循环的示例。这是我在 angular 2 beta.08

中的循环

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

Answer 1

请参阅 API 页面以获得 NgFor：

<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

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

  <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"

Answer 3

您可以使用 <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

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

How I should refactor my ngFor loops inside <template>?

angular2-template

angular