如何使用* ngFor迭代对象键

本文介绍了如何使用* ngFor迭代对象键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在Angular 2中使用* ngFor迭代[object object]。

问题是对象不是对象数组，而是包含更多对象的对象对象。

I want to iterate [object object] using *ngFor in Angular 2.

The problem is the object is not array of object but object of object which contains further objects.

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "test@example.com",
    "picture": **{ <-- I want to get thumb: url but not able to fetch that**
      "url": null,
      "thumb": {
        "url": null
      }
    },
    "address": "Nishtar Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
  }
}

我知道我们可以使用管道来迭代对象，但我们如何进一步从一个对象迭代到另一个对象意味着 data-> picture-> thum：url 。

I know we can use pipe to iterate the object but how we can iterate further from object to object means data->picture->thum:url.

推荐答案

Angular 6.0.0

介绍了 KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

原始

你可以使用烟斗

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

<div *ngFor="let key of objs | keys">

参见

这篇关于如何使用* ngFor迭代对象键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

URL