何時不在 AngularJS ng-repeat 中使用“按 $index 跟蹤”？

Question

我最近收到控制台錯誤`

錯誤：[ngRepeat:dupes] 不允許在轉發器中重復。 使用“track by”表達式來指定唯一鍵...

— AngularJS 錯誤參考 - ngRepeat:dupes

然后我使用了'track by $index' ，問題就解決了......

但這讓我開始思考……您是否有理由不想在 ng-repeat 中使用track by $index ？

我已經閱讀過類似這樣的問題以及其他文章，但似乎幾乎所有文章都只討論了使用'track by'的優點。

有人可以列出缺點並舉例說明何時不想使用track by $index嗎？

Answer 1

它有一個disadvantage ，

'track by'表達式按數組中的索引進行跟蹤。 這意味着只要索引保持不變，angularjs 就會認為它是同一個對象。

所以如果你替換數組中的任何對象，angularjs 認為它​​沒有改變，因為數組中的索引仍然相同。 因此，更改檢測不會在您期望的時候觸發。

看看這個example

嘗試更改名稱，沒有任何反應。 按索引刪除軌道，它有效。 按 item.name 添加軌道，它仍然有效。

Answer 2

避免track by $index原因有很多

• 使用一次性綁定時避免使用track by $index
• 當存在唯一的屬性標識符時，避免track by $index
• track by $index問題的其他示例

---

使用一次性綁定時避免使用track by $index

該文檔特別指出在使用一次性綁定時應避免track by $index進行track by $index 。

從文檔：

當重復模板包含一次性綁定時，避免使用track by $index 。 在這種情況下，第nth DOM 元素將始終與數組的nth項目匹配，因此即使相應項目發生更改，該元素上的綁定也不會更新，從而導致視圖與基礎數據。

— AngularJS ng-repeat 參考 - 跟蹤和重復

---

當存在唯一的屬性標識符時，避免track by $index

當有一個唯一的屬性標識符可以使用時，避免track by $index 。 當處理所有唯一的對象時，最好讓ng-repeat使用它自己的跟蹤，而不是track by $index覆蓋track by $index 。

從文檔：

如果您正在使用具有唯一標識符屬性的對象，則應通過此標識符而不是對象實例進行跟蹤。 如果您稍后重新加載數據， ngRepeat將不必為它已經呈現的項目重建 DOM 元素，即使集合中的 JavaScript 對象已被新對象替換。 對於大型集合，這顯着提高了渲染性能。

— AngularJS ng-repeat 指令 API 參考 - 跟蹤

---

track by $index問題的其他示例

在對象數組中添加和刪除對象時，我也遇到過問題。

• 使用 Angular UI Carousel 按 $index 跟蹤的問題
• Ng-Repeat 顯示一次綁定的不規則行為
• Angular：使用 ng-repeat 時，用新數據更新 $scope 會導致舊數據保留
• AngularJS 問題和 Select 綁定未加載默認值