2

我们的网络应用程序使用 ngRepeat 来显示项目列表。数组及其对象永远不会更改，但用户可以修改其中对象的值。

我们为每个项目生成一个唯一的 trackId。每次项目的值更改时，都会更新此 trackId。

我们还使用一次性绑定语法来减少页面上的观察者数量（因为它可以迅速攀升至数千个）。

但是，这种组合似乎并没有真正起作用。如果项目的 trackId 更改但对象的引用保持不变，则不会重新渲染项目。

从 angularJS 文档：

自定义表达式：可以使用任何 AngularJS 表达式来计算跟踪 id，例如使用函数或使用集合项的属性。item.id 跟踪项目中的项目是当项目具有唯一标识符（例如数据库 ID）时的典型模式。在这种情况下，对象身份无关紧要。只要 id 属性相同，两个对象就被认为是等价的。通过唯一标识符进行跟踪是最高效的方式，应尽可能使用。

如果是这样，为什么修改trackId时item没有销毁并重新创建？

例如：

$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 但这将需要更新重复中的每个绑定，因为它不能针对特定行。

谢谢

4

2 回答 2

0

保持id每个friend常数。

如果这id真的只是每个朋友的ID，为什么需要更改？如果您将该属性用于ID 之外的其他内容，则可以考虑在对象上添加一个新属性并保持 ID 不变。

如果您不想这样做，您总是可以创建一些辅助函数，将当前朋友的信息存储id-value在带有id键的字典中。然后，您可以通过 更新或检索存储在该朋友 ID 中的值friend.id。

于 2018-04-27T14:09:54.123 回答
0

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]);
};

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

于 2018-11-12T12:20:26.877 回答