填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NgForOf

一種結構型指令,為集合中的每個條目渲染一個範本。如果指令放置在一個元素上,該元素就會成為複製後的範本的父級。

A structural directive that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.

檢視"說明"...

參見

Exported from

選擇器

屬性

屬性說明
@Input()
ngForOf: (U & T[]) | (U & Iterable<T>)
只寫

可迭代表達式的值,可以將其用作範本輸入變數

The value of the iterable expression, which can be used as a template input variable.

@Input()
ngForTrackBy: TrackByFunction<T>

定義如何追蹤可迭代項的更改的函式。

A function that defines how to track changes for items in the iterable.

在迭代器中新增、移動或刪除條目時,指令必須重新渲染適當的 DOM 節點。為了最大程度地減少 DOM 中的攪動,僅重新渲染已更改的節點。

When items are added, moved, or removed in the iterable, the directive must re-render the appropriate DOM nodes. To minimize churn in the DOM, only nodes that have changed are re-rendered.

預設情況下,變更檢測器假定物件實例標識可迭代物件。提供此函式後,指令將使用呼叫此函式的結果來標識項節點,而不是物件本身的標識。

By default, the change detector assumes that the object instance identifies the node in the iterable. When this function is supplied, the directive uses the result of calling this function to identify the item node, rather than the identity of the object itself.

該函式接收兩個輸入,即迭代索引和關聯的節點資料。

The function receives two inputs, the iteration index and the associated node data.

@Input()
ngForTemplate: TemplateRef<NgForOfContext<T, U>>
只寫

此範本參考用來為 iterable 中的產生每個條目。

A reference to the template that is stamped out for each item in the iterable.

參見:

說明

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.

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

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

區域性變數

Local variables

NgForOf 可以為所提供的匯出值指定一個區域性變數別名。例如:

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

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

變更的傳導機制

Change propagation

當迭代器的內容變化時,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 接受一個帶兩個引數(indexitem)的函式。 如果給出了 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.

靜態方法

NgForOf 將要渲染的範本確保正確的上下文型別。

Asserts the correct type of the context for the template that NgForOf will render.

      
      static ngTemplateContextGuard<T, U extends NgIterable<T>>(dir: NgForOf<T, U>, ctx: any): ctx is NgForOfContext<T, U>
    
引數
dir NgForOf
ctx any
返回值

ctx is NgForOfContext<T, U>

此方法的存在向 Ivy 範本型別檢查編譯器發出訊號,即 NgForOf 結構型指令使用特定的上下文型別渲染其範本。

The presence of this method is a signal to the Ivy template type-check compiler that the NgForOf structural directive renders its template with a specific context type.

方法

要按需應用的更改。

Applies the changes when needed.

      
      ngDoCheck(): void
    
引數

沒有引數。

返回值

void