[解決済み] ngForを使ったオブジェクトキーの反復処理方法

質問

Angular2で*ngForを使って[object object]を反復処理したいのですが、どうすればいいですか？



問題は、オブジェクトがオブジェクトの配列ではなく、さらなるオブジェクトを含むオブジェクトのオブジェクトであることです。

{

  "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]"
  }
}

パイプを使ってオブジェクトを反復処理できることは知っていますが、オブジェクトからオブジェクトへさらに反復処理するにはどうしたらよいのでしょうか。 データ->画像->thum:url .

どのように解決するのですか？

アンギュラー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">

参照 ngForを使ったオブジェクトキーの反復処理方法は？