版本：v8

Angular 效能

搭配 Ionic 元件使用 *ngFor

當搭配 Ionic 元件使用 *ngFor 時，我們建議使用 Angular 的 trackBy 選項。這讓 Angular 可以更有效率地管理變更傳播，並且只更新元件內部的內容，而不是重新建立整個元件。

透過使用 trackBy，您可以為每個迴圈元素提供穩定的識別，以便 Angular 可以追蹤迭代器內的插入和刪除。以下是如何使用 trackBy 的範例

home.page.html

<ion-item *ngFor="let item of items; trackBy:trackItems">
  <ion-label>{{ item.value }}</ion-label>
</ion-item>

home.component.ts

items = [
  { id: 0, value: 'Item 0' },
  { id: 1, value: 'Item 1' },
  ...
]

trackItems(index: number, itemObject: any) {
  return itemObject.id;
}

在此範例中，我們有一個名為 items 的物件陣列。每個物件包含一個 value 和一個 id。使用 trackBy，我們傳遞一個 trackItems 函式，該函式會傳回每個物件的 id。此 id 用於為每個迴圈元素提供穩定的識別。

如需更多關於 Angular 如何使用 ngFor 管理變更傳播的資訊，請參閱 https://angular.io/api/common/NgForOf#change-propagation。

注意

您有想要分享的指南嗎？請按一下下方的「編輯此頁面」按鈕。