子コンポーネントのテンプレートに入れ子になったオブジェクトの値をAngular2で表示する方法は？

Question

私はサービスクラスからJSONを取得していますが、コンソール全体のオブジェクトに書き込むことができます。ルートレベルの値を表示できますが、ネストされた値の場合は何もない。さまざまなアプローチに依存します。

私はStackOverflow全体で解決策を見つけようとしていましたが、すべてパイプを使用しているように見えました。それは私の場合でもあなたが示唆してくれるものでしょうか？ここで

は私のコードです：親コンポーネントで

私は単に子供にオブジェクトを渡す：

子クラスで

`<app-item *ngFor="let item of items; let i = index" [item]="item[itemId]="i"></app-item> ` 

私は

を持っています

@Input() item: Item; 

そして最後に、私は次のような構造を持っている子HTMLテンプレート上：

<a [routerLink]="[itemId]" class="list-group-item clearfix" routerLinkActive="active"> 
    <div class="pull-left" (click)="stateInfo()"> 
     <h4 class="list-group-item-heading">{{ item.name }}</h4> 
     <p class="list-group-item-text">Item code : {{ item.code }}</p> 
     <p class="list-group-item-text">Item tag : {{ item?.tags }}</p> 
    </div> 
</a> 

I'vealsoは{{ item?.tags[i].name }}と私は考えることができるが、何も動いていないようで、様々な他の方法のように拡張しようとしました。

タグエンティティはオプションなので、 '？'パスで。

また、イベントリスナーをクリックしたので、console.log（this.item）を追加できます。これは私がコンソールで得るものです：

Object: 
    code: "001" 
    name: "Kitchen" 
    tags: Array[2] 
     0: Object 
      name: "tag1" 
      value: "32" 
     1: Object 
      name: "tag2" 
      value: "44" 
... 

私はあなたのDBとビューの中間層としてあなたのサービスを持っていることを理解しています。あなたのコンポーネントにサービスを注入した後、（コンポーネントから）あなたのサービスにあるメソッドを呼び出します。あなたのサービスは、データを（httpを使って）取得し、それをjsonにマッピングする責任があります。あなたのコンポーネントは応答に加入しており、jsonを配列に変換し、補間によってビューに表示しています。右？

Answer 1

タグは配列なので、その配列を繰り返して表示する必要があります。

まずは、あなたの親テンプレート内のエラーを修正してみましょう：

[item]="item[itemId]="i" 

が間違っています。反復処理するためにその後

[item]="item" 

：あなたはので、同じ行にあなただけのように単にその単一の（現在の）項目を渡し、itrerationで現在itemを渡すことができます...あなたはlet item of itemsを反復しているテンプレートに見ることができるようにタグ。前述のようにそれが配列であるので、あなたがやったように、あなただけのアイテムでそれを反復処理：

<p *ngFor="let tag of item.tags">{{tag.name}}</p> 

動作する必要があることを！ :) Plunker

脇の下として、項目を繰り返して新しい配列に割り当ててからitems配列に戻す特別な理由はありますか？なぜ単純ません： `[アイテム] =は何

.subscribe(data => { 
    this.items = data; 
})