angular - 遍历 Angular 中的对象

<分区>

我正在尝试在 Angular 2 Alpha 28 中做一些事情，但我遇到了字典和 ngFor 的问题。

我在 TypeScript 中有一个如下所示的界面:

interface Dictionary {
    [index: string]: string
}

在 JavaScript 中，这将转换为一个包含数据的对象，如下所示:

myDict={'key1':'value1','key2':'value2'}

我想遍历这个并试过这个:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

但无济于事，以下均无效:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

在所有情况下，我都会收到类似Unexpected token 或Cannot find 'iterableDiff' pipe supporting object

的错误

我在这里错过了什么？这不可能了吗？ (第一种语法适用于 Angular 1.x)还是迭代对象的语法不同？

最佳答案

Angular 6.1.0+ 答案

使用内置的 keyvalue-pipe像这样:

<div *ngFor="let item of myObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

或者像这样:

<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

mySortingFunction 在您的 .ts 文件中，例如:

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

你不需要在任何模块中注册它，因为 Angular 管道在任何模板中都是开箱即用的。

它也适用于 Javascript-Maps .

关于angular - 遍历 Angular 中的对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31490713/