Angular:更新一次性绑定的数据

Angular: Update one-time binded data

本文关键字：数据 绑定 一次性 更新 Angular      更新时间：2023-09-26

假设您的指令控制器中有一个类似的数组

this.items = [
     {active: true, title: 'bar', ...},
     {active: false, title: 'foo', ...},
     ...
];

在模板中，你可以将其可视化为

<ol>
    <li ng-repeat="item in ::items" ng-class="...">{{item.title}}</li>
</ol>

注意::，它确保只执行一次，因为该指令在ng-repeat准备好之后也会注入一些DOM元素。

演示

然而，在某个时间点，应用程序会收到更新

this.items = updatedItems;

更新与原始数据相同，除了每个项的某些属性（例如，active可能从true更改为false）。现在，由于::，更新将不起任何作用。现在我可以迭代每个项目

updatedItems.forEach((item, index) => {
    $scope.items[index].active = item.active;                
    $scope.items[index].title = item.title;
    ...
});

所以问题是，解决这个问题的最佳方法是什么？

不如有一个数据集和数据绑定的副本，而不是实际的数据集，你希望模板忽略对其的更改，所有这些都是针对特定条件的。

然后，当您希望更新数据时，您只需更新对复制数据的必要更改，这些更改就会得到反映。我知道，这确实增加了拥有数据副本的开销，但一个简单的解决方案通常可以避免以后的许多麻烦，尤其是当从团队的不同成员那里查看源时。

相关文章：