angular - ngFor 和 *ngFor 有什么区别

Question

我无法在任何地方找到对差异的准确描述。与 *ngIf 和 ngIf

相同

*ngFor的例子

<li *ngFor="let video of page" ...>
  <img src="api/Videos/{{video.id}}/thumbnail">
</li>

和一个ngFor的例子

<template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter" >
  <label  [ngStyle]="{'background-color': labelLookup[labelid].color}">
    <input (click)="changeLabel(labelid)" type="radio" name="labelSelector" value="{{ labelid }}" [checked]="labelid == 1">
  </label>
</template>

Answer 1

区别在于*ngFor转换为 <template ngFor [ngForOf]="..."内部。

它们是等价的，但前者更方便编写。

显式版本 ( <template ngFor ...> ) 允许一次将指令应用于多个元素，而隐式版本(速记)仅使用 <template> 包装应用它的元素标签。

随着 Angular 2.0.0 的最终版本 <ng-container>添加了元素，允许在行为类似于 <template> 的元素上使用速记语法元素(未添加到 DOM)。

另见

• *ngIf and *ngFor on same element causing error

• Create two elements for a single `ngFor` iteration?