Как итерации ключей объектов с помощью * ngFor

Я хочу повторить [объект объекта] с помощью * ngFor в Angular 2.

Проблема заключается в том, что объект не является массивом объекта, а объектом объекта, который содержит дополнительные объекты.

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "[email protected]",
    "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": "[email protected]"
  }
}

Я знаю, что мы можем использовать pipe для итерации объекта, но как мы можем итератировать дальше от объекта к объекту, значит data- > picture- > thum: url.

Ответ 1

Угловой 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

представил KeyValuePipe

Смотрите также https://angular.io/api/common/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">

Ответ 2

Я думаю, что самый элегантный способ сделать это - использовать javascript Object.keys вот так:

в Компоненте передайте Объект в шаблон:

Object = Object;

затем в шаблоне:

<div *ngFor="let key of Object.keys(objs)">
   my key: {{key}}
   my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>

Ответ 3

Вам нужно создать пользовательский канал.

import { Injectable, Pipe } from '@angular/core';
@Pipe({
   name: 'keyobject'
})
@Injectable()
export class Keyobject {

transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}}

И затем используйте его в своем * ngFor

*ngFor="let item of data | keyobject"

Ответ 4

Я знаю, что на этот вопрос уже дан ответ, но у меня есть одно решение для этого же.

Вы также можете использовать Object.keys() внутри *ngFor чтобы получить требуемый результат.

Я создал демо на стекблиц. Я надеюсь, что это поможет/руководство для вас/других.

КОД СНИПЕТТ

HTML-код

<div *ngFor="let key of Object.keys(myObj)">
  <p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>

Код файла .ts

Object = Object;

myObj = {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "1234567890",
    "role": null,
    "email": "[email protected]",
    "picture": {
        "url": null,
        "thumb": {
            "url": null
        }
    },
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "[email protected]"
}

Ответ 5

1. Создайте пользовательский канал, чтобы получить ключи.

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

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

В угловом файле шаблона вы можете использовать * ngFor и перебирать свой объектный объект

<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>

Ответ 6

Если вы используете оператор map() в своем ответе, вы можете связать с ним оператор toArray()... тогда вы должны иметь возможность итерации по вновь созданному массиву... по крайней мере, что сработало для меня:)

Ответ 7

В Angular теперь есть тип итеративного Object для этого сценария, который называется Set. Это соответствовало моим потребностям, когда я нашел этот вопрос в поиске. Вы создаете набор, "добавляете" к нему, как "толкаете" в массив, и помещаете его в ngFor, как массив. Нет труб или что-нибудь.

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

<ul>
   <li *ngFor="let object of myObjList">
     {{object}}
   </li>
</ul>

Ответ 8

Используйте индекс:

<div *ngFor="let value of Objects; index as key">

Использование:

{{key}} -> {{value}}

Ответ 9

Я сделал бы это:

<li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>