web-dev-qa-db-ja.com

* ngFor（Angular 4）を使用してJSONオブジェクトの配列をループします

私のjsonファイルにあるオブジェクトの配列をループしたいのですが。

ジェイソン

[
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
]

html

<div *ngFor="let person of persons">
   <p>{{person.name}}</p> <!-- this works fine-->
   <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
     {{color.name}}
   </p>
</div>

人のカラー配列にアクセスできません。どうすればそれを達成できますか？

私はすでにこれらの投稿を見ましたが、それらの解決策は私を助けることができませんでした：

Angular2 ngFor JSONでの反復

Angular2-* ngFor /配列を持つjsonオブジェクトをループ

arraysjsonangularngfor
4
BlueCat

コード（表示した部分）は正常に機能します（下にリンクされているプラ​​ンカーを参照）。

あなたの質問に示されていない唯一のものはあなたのJavaScriptオブジェクトを変数personsに割り当てる方法ですので、私はあなたにあなたにもっと多くのコードを示す/問題を検索することをお勧めします。

https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let person of persons">
        <p>{{person.name}}</p> <!-- this works fine-->
        <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
           {{color.name}}
        </p>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {

  }

  persons = [
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
  ];
}
4
Pac0

Angular 6.1 +の場合、デフォルトのパイプを使用できますkeyvalue（ レビューも行う ）：

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

WORKING DEMO

以前：あなたが言っているように：

Angular2-* ngFor/loop with json object with array、これはあなたを助けることができませんでした

あなたはそれを必要としません、あなたのコードはうまく機能します、チェックしてください

WORKING DEMO

10
Vivek Doshi