web-dev-qa-db-ja.com

angular 2のNgforのjsonオブジェクトの繰り返し

私はNgforでjsonオブジェクトの反復に問題があります、私のテンプレートがあります：

テンプレート：

<h1>Hey</h1>
  <div>{{ people| json}}</div>
  <h1>***************************</h1>
  <ul>
    <li *ngFor="#person of people">
        {{
          person.label
        }}
    </li>
 </ul>

人々は私が反復しようとしているjsonオブジェクトであり、（people | json）の結果があり、リストを取得していない、ここにスクリーンショットがあります：

最後に、jsonファイルの一部を示します。

{
"actionList": {
"count": 35,
"list": [
    {
    "Action": {
        "label": "A1",
        "HTTPMethod": "POST",
        "actionType": "indexation",
        "status": "active",
        "description": "Ajout d'une transcription dans le lac de données",
        "resourcePattern": "transcriptions/",
        "parameters": [
            {
                "Parameter": {
                    "label": "",
                    "description": "Flux JSON à indexer",
                    "identifier": "2",
                    "parameterType": "body",
                    "dataType": "json",
                    "requestType": "Action",
                    "processParameter": {
                        "label": "",
                        "description": "Flux JSON à indexer",
                        "identifier": "4",
                        "parameterType": "body",
                        "dataType": "json",
                        "requestType": "Process"
                    }
                }
            },

気軽に助けてください

jsonangularobservablengfor
9
Anna

peopleオブジェクトは配列ではないため、そのまま使用して繰り返し処理できます。

次の2つのオプションがあります。

  • サブプロパティを反復処理したい。例えば：

    <ul>
  <li *ngFor="#person of people?.actionList?.list">
    {{
      person.label
    }}
  </li>
</ul>

  • オブジェクトのキーを反復処理する必要があります。この場合、カスタムパイプを実装する必要があります。

    @Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    } 

    let keys = [];
    for (let key in value) {
      keys.Push({key: key, value: value[key]});
    } 
    return keys;
  } 
}

    次のように使用します：

    <ul>
  <li *ngFor="#person of people | keys">
    {{
      person.value.xx
    }}
  </li>
</ul>

    詳細については、この回答を参照してください。

12
Thierry Templier