角2は、継承されたコンテンツをループ変数にバインドします。

Question

コンポーネントループ内の変数に継承されたコンテンツをバインドしようとしていますが、できません。

私はPrimeNGのdropdownコンポーネントで見てきたし、彼らは、ループのcar変数にバインドするlet-carとともにtemplateタグを使用します。

しかし、私がこれを試してみると、私はもはやtranscludeの内容を得ることができません。これを達成する正しい方法は何ですか？

試み：コンポーネントで

<!-- Obviously not gonna work --> 
<comp> 
    <span>{{option.name}}, {{option.type}}</span> 
</comp> 

<!-- Thought this would work but it doesn't, in odd scenarios I get the last element of the loop to transclude content and bind correctly. --> 
<comp> 
    <template let-option> 
    <span>{{option.name}}, {{option.type}}</span> 
    </template> 
</comp> 

：

<ul> 
    <li *ngFor="let option of options"> 
    <ng-content></ng-content> 
    </li> 
</ul> 

私が達成しようとしているかの簡単なplunkr：

https://plnkr.co/edit/6SS03fuXmbvJB4nmf1AO?p=preview

Answer 1

角度アップデート

ngOutletContextをも参照してくださいhttps://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

元

ngTemplateOutletContext

に改名されたあなたは、テンプレートの参照を取得し、テンプレートコンテンツを取得する例ngTemplateOutletやngForTemplateのために使用して追加することができDOMに追加。 ngTemplateOutletを使用すると、あなたが試したようなテンプレート変数でアクセスできる独自のコンテキストを提供することができます。

<template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: context}"></template> 

class CompComponent { 
    context = {option: 'some option'}; 
    constructor(private templateRef:TemplateRef){} 
} 

は、私はこれをする必要があります 新しいバージョンで考える

<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: context}"></template> 

（まだ確認していません）

も参照してください

• How to repeat a piece of HTML multiple times without ngFor and without another @Component
• Angular2 child component as data