角度2は、コンテンツ

Question

として値を取得し、私は、以下のように角度2の親コンポーネントでループ子コンポーネントに

するlistContentはJSON配列です

<segment-header> 
</segment-header> 
<segment-content *ngFor="let content of listContent"> 
</segment-content> 

をしようとしています。したがって、内容はjsonオブジェクト、 です。同じ内容がこのように表示されます。

<div class="segment-content-class"> 
    {{content.code}} = {{content.value}} 
</div> 

私の問題は、子コンテンツ内のIループは、それが正常に動作している場合であるが、親の中で、私がループしている場合は、コンテンツオブジェクトを取得し、それが動作していない子供にそれを表示してみてください。

Answer 1

あなたは以下のようにこれを達成するためangular2コンテンツ投影を使用しなければならない、

AppComponent

<div> 
     <segment-header></segment-header> 
     <segment-content *ngFor="let content of listContent"> 
     <div class="segment-content-body"> 
     {{content.code}} = {{content.value}} 
     </div> 
     </segment-content> 
</div> 

SegmentHeaderComponent

@Component({ 
    selector: 'segment-header', 
    template: ` 
    <div> Header </div> 
    `, 
}) 
export class SegmentHeaderComponent {} 

SegmentContainerComponent

@Component({ 
    selector: 'segment-content', 
    template: ` 
    <div> 
     <ng-content select=".segment-content-body"> </ng-content> 

    </div> 
    `, 
}) 
export class SegmentContentComponent {} 

LIVE DEMO