对于如何在angular2中使用*ngFor迭代对象时获取对象的键和值,我有点困惑。我知道角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'}],
      }

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

如何使用*ngFor动态获取key1和key2 ?经过广泛的搜索,我发现了使用管道的想法,但我不知道如何去做。 在angar2中有任何内建的管道来做同样的事情吗?


当前回答

ECMA 2017+解决方案

遵循一些其他答案的思想,您可以创建一个Pipe来从您的对象创建一个[key, value]数组,但是以一种更简单的方式,遵循新的方法object。在ECMA 2017中引入的条目。

Pipe

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 {}

然后你可以在你的组件中使用typescript代码或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

其他回答

如果你已经在使用Lodash,你可以使用这个简单的方法,包括键和值:

<ul>
  <li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li>
</ul>

在typescript文件中,包括:

import * as _ from 'lodash';

在导出的组件中,包括:

_: any = _;

有对象。在*ngFor中使用它。

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
}

像这样创建数组

tags = [
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        }
    ];

一直都有效

你现在必须这样做,我知道不是很有效的,因为你不想转换你从firebase接收的对象。

    this.af.database.list('/data/' + this.base64Email).subscribe(years => {
        years.forEach(year => {

            var localYears = [];

            Object.keys(year).forEach(month => {
                localYears.push(year[month])
            });

            year.months = localYears;

        })

        this.years = years;

    });

@Marton对接受的答案有一个重要的反对意见,理由是管道在每次更改检测时都会创建一个新的集合。相反,我将创建一个HtmlService,它提供了一系列实用函数,视图可以使用如下:

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
  items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
  constructor(private html: HtmlService){}
}

@Injectable()
export class HtmlService {
  keys(object: {}) {
    return Object.keys(object);
  }
  // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}