小编典典

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

all

我对在用于迭代对象时如何在 angular2 中获取对象的key和感到有些困惑。我知道在 Angular 1.x
中有类似的语法value``*ngFor

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

但我不知道如何在 angular2 中做同样的事情。我尝试过类似的方法，但没有成功：

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

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

这是我尝试的 plnkr： http
://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

如何获取key1和key2动态使用*ngFor？经过广泛搜索，我发现了使用管道的想法，但我不知道如何去做。在angular2中是否有任何内置管道可以做同样的事情？

阅读 86

2022-03-07

共1个答案

小编典典

与 最新版本的 Angular (v6.1.0) 一样 ，Angular 团队在 Angular
包的模块中添加了新的内置管道，名称与keyvalue管道相同，以帮助您遍历对象、映射和数组common。例如 -

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

要保持原始顺序，请使用keyvalue:onCompare，
并在组件中定义回调：

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

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

angular6-keyvaluepipe-

demo?file=src%2Fapp%2Fapp.component.ts)

在这里查看更多有用的信息 -

如果您使用的是 Angular v5 或更低版本，或者您想使用管道实现，请遵循此答案

2022-03-07