NgForOflink

说明link

ngForOf 指令通常在 *ngFor 的简写形式内部使用。在这种形式下，每次迭代要渲染的模板是包含指令的锚点元素的内容。

The ngForOf directive is generally used in the shorthand form *ngFor. In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.

<li> 元素中包含一些选项的简写语法。

The following example shows the shorthand syntax with some options, contained in an <li> element.

      
        content_copy
      
      <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
    

简写形式会扩展为使用 <ng-template> 元素 ngForOf 选择器的长形式。<ng-template> 元素的内容是包裹此简写格式指令的 <li> 元素。

The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive.

这是简写形式示例的扩展版本。

Here is the expanded version of the short-form example.

      
        content_copy
      
      <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>
    

Angular 在编译模板时会自动扩展简写语法。每个嵌入式视图的上下文都会根据其词法位置在逻辑上合并到当前组件上下文。

Angular automatically expands the shorthand syntax as it compiles the template. The context for each embedded view is logically merged to the current component context according to its lexical position.

使用简写语法时，Angular 在一个元素上只允许有一个结构型指令。例如，如果要根据条件进行迭代，请将 *ngIf 放在 *ngFor 元素的容器元素上。欲知详情，请参见《结构型指令》 。

When using the shorthand syntax, Angular allows only one structural directive on an element. If you want to iterate conditionally, for example, put the *ngIf on a container element that wraps the *ngFor element. For futher discussion, see Structural Directives.

局部变量link

Local variableslink

NgForOf 可以为所提供的导出值指定一个局部变量别名。例如：

NgForOf provides exported values that can be aliased to local variables. For example:

      
        content_copy
      
      <li *ngFor="let user of users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>
    

NgForOf 导出了一系列值，可以指定别名后作为局部变量使用：

The following exported values can be aliased to local variables:

• $implicit: T：迭代目标（绑定到 ngForOf）中每个条目的值。

  $implicit: T: The value of the individual items in the iterable (ngForOf).

• ngForOf: NgIterable<T>：迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。

  ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async).

• index: number：可迭代对象中当前条目的索引。

  index: number: The index of the current item in the iterable.

• count: number：可迭代对象的长度。

  count: number: The length of the iterable.

• first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。

  first: boolean: True when the item is the first item in the iterable.

• last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 true。

  last: boolean: True when the item is the last item in the iterable.

• even: boolean：如果当前条目在可迭代对象中的索引号为偶数则为 true。

  even: boolean: True when the item has an even index in the iterable.

• odd: boolean：如果当前条目在可迭代对象中的索引号为奇数则为 true。

  odd: boolean: True when the item has an odd index in the iterable.

变更的传导机制link

Change propagationlink

当迭代器的内容变化时，NgForOf 会对 DOM 做出相应的修改：

When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:

• 当新增条目时，就会往 DOM 中添加一个模板实例。

  When an item is added, a new instance of the template is added to the DOM.

• 当移除条目时，其对应的模板实例也会被从 DOM 中移除。

  When an item is removed, its template instance is removed from the DOM.

• 当条目集被重新排序时，他们对应的模板实例也会在 DOM 中重新排序。

  When items are reordered, their respective templates are reordered in the DOM.

Angular 使用对象标识符（对象引用）来跟踪迭代器中的添加和删除操作，并把它们同步到 DOM 中。 这对于动画和有状态的控件（如用来接收用户输入的 <input> 元素）具有重要意义。添加的行可以带着动画效果进来，删除的行也可以带着动画效果离开。 而未变化的行则会保留那些尚未保存的状态，比如用户的输入。

Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM. This has important implications for animations and any stateful controls that are present, such as <input> elements that accept user input. Inserted rows can be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such as user input. For more on animations, see Transitions and Triggers.

即使数据没有变化，迭代器中的元素标识符也可能会发生变化。比如，如果迭代器处理的目标是通过 RPC 从服务器取来的， 而 RPC 又重新执行了一次。那么即使数据没有变化，第二次的响应体还是会生成一些具有不同标识符的对象。Angular 将会清除整个 DOM， 并重建它（就仿佛把所有老的元素都删除，并插入所有新元素）。这是很昂贵的操作，应该尽力避免。

The identities of elements in the iterator can change while the data does not. This can happen, for example, if the iterator is produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response produces objects with different identities, and Angular must tear down the entire DOM and rebuild it (as if all old elements were deleted and all new elements inserted).

要想自定义默认的跟踪算法，NgForOf 支持 trackBy 选项。 trackBy 接受一个带两个参数（index 和 item）的函数。 如果给出了 trackBy，Angular 就会使用该函数的返回值来跟踪变化。

To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.