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

Question

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

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中是否有任何内置管道可以做同样的事情？

原文由 Pardeep Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

与 最新版本的 Angular (v6.1.0) 一样，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;
  }
}

工作分叉示例

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

• https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
• https://github.com/angular/angular/commit/2b49bf7

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

• 使用 ngfor 访问对象的键和值

原文由 Pardeep Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

ECMA 2017+ 解决方案

按照其他一些答案的想法，您可以创建一个 Pipe 以 从您的 object 创建一个 [key, value] 数组，但是以更简单的方式，遵循新方法 Object.entries 在 ECMA 2017 年。

管道

import { PipeTransform, Pipe } from '@angular/core';

/**
 * Transform a literal object into array
 */
@Pipe({
  name: 'forObject',
  pure: true,
})
export class ForObjectPipe implements PipeTransform {

  transform(object, args?: any): any {
    return Object.entries(object);
  }
}

模块

在您的模块中，您声明并提供它

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ForObjectPipe } from './for-object.pipe';

import { MyPageRoutingModule } from './my-routing.module';
import { MyPage } from './my.page';

@NgModule({
  imports: [
    CommonModule,
    MyPageRoutingModule,
  ],
  declarations: [
    MyPage,
    ForObjectPipe,
  ],
  providers: [
    ForObjectPipe,
  ]
})
export class MyPageModule {}

然后你可以在你的组件中使用打字稿代码或 HTML。

在组件中使用

// ...
import { ForObjectPipe } from './for-object.pipe';

@Component({
  selector: 'app-my',
  templateUrl: './my.page.html',
  styleUrls: ['./my.page.scss'],
})
export class MyComponent {
  obj: { [key: any]: any } = {
    1: 'hello',
    2: 'world',
  };

  constructor(private forObjectPipe: ForObjectPipe) { }

  foo() {
     const myArray = this.forObjectPipe.transform(this.obj);
     // same as
     const myArray = Object.entries(this.obj);
  }
}

在组件视图中使用

<h1>Object:</h1>
<div *ngFor="let pair of obj | forObject">
  KEY: {{ pair[0] }} - VALUE: {{ pair[1] }}
</div>

输出：

 Object:
KEY: 1 - VALUE: hello
KEY: 2 - VALUE: world

现场演示： https ://stackblitz.com/edit/angular-qapapx?file=src/app/hello.component.ts

原文由 Wesley Gonçalves 发布，翻译遵循 CC BY-SA 4.0 许可协议