web-dev-qa-db-ja.com

* ngForを使用してオブジェクトキーを反復処理する方法

Angularで* ngForを使用して[オブジェクトオブジェクト]を繰り返したい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]"
  }
}

パイプを使用してオブジェクトを反復処理できることはわかっていますが、オブジェクトからオブジェクトにさらに反復処理する方法はdata-> picture-> thum：urlです。

angularionic2
49
Umar Rasheed

Angular 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？を使用してオブジェクトキーを反復処理する方法 も参照してください。

118
Günter Zöchbauer

そのための最もエレガントな方法は、次のように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>
33
Sheki

カスタムパイプを作成する必要があります。

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"
8
Igor Janković

私はこの質問にすでに答えていることを知っていますが、これに対する1つの解決策があります。

*ngForの内部で Object.keys() を使用して、必要な結果を取得することもできます。

stackblitzでデモを作成しました。これがあなたや他の人に役立つ/ガイドになることを願っています。

コードスニペット

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]"
}
8
Krishna Rathore

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);
  }
}
  1. angularテンプレートファイルでは、* ngForを使用してオブジェクトオブジェクトを反復処理できます。
<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>
2
skipper21

現在、Angularには、まさにこのシナリオのためのSetという一連の反復オブジェクトがあります。この質問の検索を見つけたとき、それは私のニーズに合っていました。セットを作成し、配列に「プッシュ」するように「追加」し、配列のようにngForにドロップします。パイプなどはありません。

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

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

応答でmap()演算子を使用している場合は、toArray()演算子をそれにチェーンすることができます...その後、新しく作成された配列を反復処理できるはずです...私:)

0
Hrx