Angular2 benutzerdefinierte Komponente - Vorlage

Question

Ich habe eine Komponente für die Tabelle. Ich habe Array- und Komponenten-Render-Tabelle hinzugefügt. Hier ist mein Code:

<my-table [source]="data"> 
<my-column [name]="Id" [title]="Object id"> 
<my-column [name]="Description" [title]="Object Description"> 
</my-table> 

Komponente:

<table> 
<tr ngFor="let row of source"> 
    <td *ngFor="let column of columns">{{row[column.value]}}</td> 
</tr> 
</table> 

Diese Komponente erstellen Tabelle (Attribut Name ist Eigenschaft für "Bindung" von der Quelle). Ich möchte Daten in Spalten formatieren. Ich habe versucht, den Einsatz <ng-content>:

Komponente:

<table> 
<tr ngFor="let row of source"> 
    <td *ngFor="let column of columns"><ng-content select="[columnBody] "></ng-content></td> 
</tr> 
</table> 

Verwendung:

<my-table [source]="data"> 
<my-column [name]="Id" [title]="Object id"> 
<my-column [name]="Description" [title]="Object Description"> 
    <div columnBody>HOW TO USE VALUE (row[column.value]) HERE??</div> 
</my-column> 
</my-table> 

I Gebrauchswert benötigen, die in Objekt in component.html ist, wo ich diese Komponente verwenden. Es ist möglich?

kurzes Beispiel: Komponente:

<ng-content select="[columnBody]" value="row[column.value]"> 

Verwendung:

<div columnBody><strong>{{value}}</strong></div> 

Answer 1

Ok versuche ich dieses Beispiel, aber es funktioniert nicht. Schriftart ist nicht grün. Ich weiß nicht, wo ist Problem:

list.component.ts

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'] 
}) 
export class ListComponent implements OnInit { 
    @Input() source: string[]; 
    @ContentChild('tableHeaderTemplate') template: TemplateRef<any>; 
    constructor() { } 

    ngOnInit() { 
    } 

} 

list.component.html

<ul> 
    <li *ngFor="let s of source"> 
    <ng-container *ngIf="!template">{{s}}</ng-container> 
    <ng-template *ngIf="template" [ngTemplateOutlet]="template"></ng-template> 
    </li> 
</ul> 

app.component.html:

<app-list [source]="source"> 
    <ng-template let-value> 
    <span style="color: green">{{ value }}</span> 
    </ng-template> 
</app-list>