Ich versuche, in Angular2 eine Auflistungskomponente zu erstellen, die die Elemente, die Spalten und die Vorlagen für die Felder der Elemente vom Benutzer der Komponente übernimmt. Also versuche ich @ zu benutzngTemplateOutlet undngOutletContext (die ich gelesen habe sind experimentell). Aber ich kann es nicht zum Laufen bringen.

Hier ist eine vereinfachte Komponente, um zu demonstrieren, was ich versuche zu tun:

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

Hier ist die Verwendung der Komponente:

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

Und hier sind Beispieldaten:

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" }
];

Hier ist ein Plunker, der das Problem nach Anpassung des Codes nach Günters Kommentar reproduziert:https: //plnkr.co/edit/jB6ueHyEKOjpFZjxpWEv? p = preview