2017-07-13 5 views
0

私はテーブルのコンポーネントを持っています。私は配列とコンポーネントレンダリングテーブルを追加しました。ここに私のコードは次のとおりです。Angular2カスタムコンポーネント - テンプレート

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

コンポーネント:

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

このコンポーネントは、(属性名は元から "結合" のプロパティである)テーブルを作成します。 データを列に整形したいと思います。

成分:

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

が使用:

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

私はこのコンポーネントを使用component.htmlのオブジェクトにある値を使用する必要が私は使用<ng-content>を試みました。可能です?

ショート例: コンポーネント:使用

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

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

あなたはこの質問をいくつかの考えとして考えることができます。https://stackoverflow.com/questions/42586743/adding-a-link-template-column-to-a-custom-table-component – yurzui

答えて

0

は、[OK]を、私はこの例を試すが、その動作していません。フォントは緑ではありません。私は、問題がどこにあるか知らない:

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() { 
    } 

} 

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

list.component.html:

<app-list [source]="source"> 
    <ng-template let-value> 
    <span style="color: green">{{ value }}</span> 
    </ng-template> 
</app-list> 
関連する問題