Question

我有一个HTML片段，它遍历键，值集合。当我创建一个对象并放入一些值，然后通过HTML片段迭代该对象时，一切都很完美。

但是，由于我需要特定顺序的密钥，我使用Map而不是普通对象。这次我调试时可以看到我的插入顺序被保留了，但由于某种原因，迭代收集的HTML片段似乎不知道如何这样做。当我使用地图对象时，我在屏幕上看不到任何内容，当我看到无序内容时，与常规对象相反

tr ng-repeat="(key, value) in rowTitlesValues"

我的HTML片段是什么样的，当我将rowTitlesValues切换回对象再次工作时，我做错了什么，以及如何保持插入顺序或如何对对象进行排序以使其键是自定义顺序？

Answer 1

来自ng-repeat（link）的角度参考：

迭代对象属性

可以使用以下语法让ngRepeat迭代对象的属性：

<div ng-repeat="(key, value) in myObj"> ... </div>

您需要知道JavaScript规范没有定义为对象返回的键的顺序。（为了在Angular 1.3中缓解这种情况，使用ngRepeat指令按字母顺序对键进行排序。）

1.4版删除了字母排序。我们现在依赖于在myObj中运行key时浏览器返回的顺序。浏览器似乎通常遵循按照定义顺序提供密钥的策略，[...]

如果不需要，建议的解决方法是将对象转换为一个数组，该数组在提供给ngRepeat之前按照您喜欢的顺序排序。您可以使用toArrayFilter等过滤器执行此操作，或者自己在对象上实现$ watch。

此外，我不认为Angular 1.x知道如何迭代Map。我相信代码中的this行证明了这一点：

collectionKeys = [];
for (var itemKey in collection) { // iterates your object using `in`, not `of` or `Map.forEach()`
    ...
}
// ng-repeat then iterates the collectionKeys to create the DOM

因此，您可能需要充当Angular文档建议：

[...] 将您的对象转换为一个数组，该数组在提供给ngRepeat之前按照您喜欢的顺序排序。您可以使用诸如toArrayFilter之类的过滤器来执行此操作，或者自己对该对象实施$ watch。

在Angular中保持插入顺序

1 个答案:

迭代对象属性