Typescript 使用 *ngFor 访问对象的键和值

发布于07月24日

我有点困惑，如何在angular2中获得对象的key和value，同时使用*ngFor对对象进行迭代.我知道在1.有一种语法

ng-repeat="(key, value) in demo"

但我不知道如何在安格拉尔做到这一点.我也try 过类似的方法，但没有成功:

    <ul>
      <li *ngFor='#key of demo'>{{key}}</li>
    </ul>

    demo = {
        'key1': [{'key11':'value11'}, {'key12':'value12'}],
        'key2': [{'key21':'value21'}, {'key22':'value22'}],
      }

以下是我try 的plnkr:

如何使用*ngFor动态获取key1和key2？经过广泛的搜索，我发现了使用管道的 idea ，但我不知道该怎么做.

推荐答案

与latest release of Angular (v6.1.0)中一样，Angular团队为名为"keyvalue pipe"的管道添加了新的内置管道，以帮助您在Angular软件包的common模块中迭代对象、贴图和array.

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

To keep original order, use keyvalue:onCompare,
and in component define callback:

// ...
import {KeyValue} from '@angular/common';

@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
    return -1;
  }
}