NG重復一次綁定和“跟蹤”更改

Question

我們的網絡應用使用ngRepeat來顯示項目列表。 數組及其對象永遠不會更改，但是用戶可以修改內部對象的值。

我們為每個項目生成唯一的trackId。 每當項目的值更改時，此trackId都會更新。

我們還使用一次性綁定語法來減少頁面上的觀察者數量（因為它可以迅速攀升至數千個）。

但是，這種組合似乎並沒有真正起作用。 如果項目的trackId發生更改，但對象的引用保持不變，則不會重新渲染該項目。

從angularJS文檔中：

自定義表達式：可以使用任何AngularJS表達式來計算跟蹤ID，例如使用函數或使用收集項目上的屬性。 當項目具有唯一標識符（例如數據庫ID）時，按item.id跟蹤的項目中的item是一種典型模式。 在這種情況下，對象身份無關緊要。 只要兩個對象的id屬性相同，就認為它們是等效的。 通過唯一標識符進行跟蹤是最有效的方式，應盡可能使用它。

如果是這種情況，為什么在修改trackId時不銷毀並重新創建該項目？

例如：

$scope.friends = [
    {name:'John', age:25, id: 'John-25'},
    {name:'Mary', age:40, id: 'Mary-40'},
    {name:'Peter', age:85, id: 'Peter-85'}
];

$scope.change = function(i) {
    var f = $scope.friends[i];
    f.age = Math.floor(Math.random() * 100);
    f.id = f.name + '-' + f.age;
};

和

 <div ng-repeat="friend in friends track by friend.id">
    <div ng-bind="'Track id: ' + friend.id"></div>
    <div ng-bind="'Regular binding:' + friend.age"></div>
    <div ng-bind="::'One-time binding:' + friend.age"></div>
</div>

<button ng-click="change(0)">Change John's age</button>
<button ng-click="change(1)">Change Marys's age</button>
<button ng-click="change(2)">Change Peters's age</button>

在此演示中，我希望當trackId更改時對象將被銷毀，並且應該使用新的一次性綁定值重新渲染元素。

https://plnkr.co/edit/Lklq3ZNDUuggjgwmkoxj?p=preview

有誰對解決這個問題有任何建議嗎？ 由於性能原因，我們絕對不能刪除一次性綁定。 我也研究了angular-bind-notifier，但是這將要求更新重復中的每個綁定，因為它不能針對特定的行。

謝謝

Answer 1

保持每個friend的id不變。

如果此id確實只是每個朋友的ID，為什么需要更改？ 如果您正在使用該屬性的東西比一個ID 多 ，也許考慮對象上添加新的屬性，並保持ID的常數。

如果您不想這樣做，則總是可以創建一些幫助函數，該函數將當前朋友的id-value在帶有id鍵的字典中。 然后，您可以通過friend.id更新或檢索存儲在該朋友ID中的friend.id 。

Answer 2

ng-repeat內部使用$watchCollection ，這是陣列上的淺表，因此更改陣列項之一上的屬性不會導致ng-repeat更新。 該文檔在這里有點誤導。

如您所料，您需要更改對象引用。 切換ID后，將對象替換為淺表副本。 這將導致$watchCollection檢測到更改，然后ng-repeat將由於id更改而替換該項目。

$scope.friends = [
    {name:'John', age:25, id: 'John-25'},
    {name:'Mary', age:40, id: 'Mary-40'},
    {name:'Peter', age:85, id: 'Peter-85'}
];

$scope.change = function(i) {
    var f = $scope.friends[i];
    f.age = Math.floor(Math.random() * 100);
    f.id = f.name + '-' + f.age;

    $scope.friends[i] = Object.assign({}, $scope.friends[i]);
};

更新的插件： https ://plnkr.co/edit/s2ztGQ ? p = preview