Kann ngTemplateOutlet nicht zum Funktionieren bringen

Ich versuche zu bauen, eine Auflistung Komponente in Angular2, nimmt die Elemente, die Spalten und die Vorlagen für die Felder der Elemente, die vom Benutzer der Komponente. So bin ich versucht zu verwenden ngTemplateOutlet und ngOutletContext (die ich gelesen habe sind experimentell). Aber ich kann nicht ankommen es zu wirken.

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

<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>

Ist hier und Beispiel-Daten:

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 Reproduktion die Frage nach der Anpassung des Codes nach Günters Kommentar:
https://plnkr.co/edit/jB6ueHyEKOjpFZjxpWEv?p=preview

InformationsquelleAutor der Frage Hampus | 2016-11-04

  1. 23

    Dies ist, wie Sie brauchen, um dies zu tun:

    @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

    InformationsquelleAutor der Antwort Bazinga

  2. 13

    update Winkel 5

    ngOutletContext wurde umbenannt, um ngTemplateOutletContext

    Siehe auch https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

    original

    Nicht verwenden [] und {{}} zusammen. Entweder das eine oder das andere, aber nicht beides.

    Nicht verwenden {{}} wenn Sie wollen ein Objekt übergeben, weil {{}} ist für die string-interpolation.

    Sollte es 

    [ngTemplateOutlet]="column.templateRef"

    Plunker Beispiel

    InformationsquelleAutor der Antwort Günter Zöchbauer

Schreibe einen Kommentar