無法讓ngTemplateOutlet工作

我正在嘗試在Angular2中構建一個列表組件，該組件使用了來自組件用戶的項目字段的項目，列和模板。所以我試圖使用ngTemplateOutlet和ngOutletContext（我讀過的是實驗性的）。但我無法讓它工作。無法讓ngTemplateOutlet工作

下面是一個簡單的組件來證明什麼，我試圖做的：

<div *ngFor="let item of items> 
    <span *ngFor="let column of columns> 
    <template [ngOutletContext]="{ item: item }" 
       [ngTemplateOutlet]="column.templateRef"></template> 
    </span> 
</div>

這裏是元件的使用：

<my-component [items]="cars" [columns]="carColumns"> 
    <template #model>{{item.model}}</template> 
    <template #color>{{item.color}}</template> 
    <template #gearbox>{{item.gearbox}}</template> 
</my-component>

這裏是示例數據：

cars = [ 
    { model: "volvo", color: "blue", gearbox: "manual" }, 
    { model: "volvo", color: "yellow", gearbox: "manual" }, 
    { model: "ford", color: "blue", gearbox: "automatic" }, 
    { model: "mercedes", color: "silver", gearbox: "automatic" } 
]; 

carColumns = [ 
    { templateRef: "model" }, 
    { templateRef: "color" }, 
    { templateRef: "gearbox" } 
];

下面是根據Günters評論： https://plnkr.co/edit/jB6ueHyEKOjpFZjxpWEv?p=preview

來源

2016-11-04 Hampus

你是不是想通過'TemplateRef'爲字符串？一種方法https://plnkr.co/edit/3yM25cUVeP4fK0cxhpXp?p=preview – yurzui

另一種方式是使用'ContentChildren' https://plnkr.co/edit/2Ohj12Gax6UaK6LJ5dwD?p=preview – yurzui

@yurzui有趣的。你的版本如何工作，而不是我的？不，列需要是一個對象列表，因爲我像頭一樣傳遞附加信息，如果它現在應該顯示或不顯示。看起來你和我的朋友之間唯一的區別就是你將字段作爲字符串列表傳遞。 – Hampus

這是你需要如何做到這一點：

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div *ngFor="let item of items"> 
     <span *ngFor="let column of columns"> 
     <template [ngTemplateOutlet]="column.ref" [ngOutletContext]="{ item: item }"></template> 
     </span> 
    </div>` 
}) 
export class MyComponent { 
    @Input() items: any[]; 
    @Input() columns: any[]; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <my-component [items]="cars" [columns]="columns"> 
     <template #model let-item="item">{{item?.model}}</template> 
     <template #color let-item="item">{{item?.color}}</template> 
     </my-component> 
    </div>` 
}) 
export class App { 
    @ViewChild('model') model; 
    @ViewChild('color') color; 
    cars = [ 
     { model: "volvo", color: "blue" }, 
     { model: "saab", color: "yellow" }, 
     { model: "ford", color: "green" }, 
     { model: "vw", color: "orange" } 
    ]; 

    ngAfterContentInit() { 
    this.columns = [ 
     { ref: this.model }, 
     { ref: this.color ] 
    ]; 
    } 
}

Plunker

來源

2016-11-04 09:34:46 Bazinga

謝謝一堆。我不遠處，但足以感受到我的頭靠在牆上的衝動。 – Hampus

我很驚訝你需要明確地說'let-item =「item」'。添加一個let解決了我遇到的類似問題。你會認爲這是暗示的。 –

{ref：this.color]這裏不是一個括號，並且在4.0改爲 –