私のコンポーネントの内容からmd-tableにcolumnDefinitionsを追加するには

Question

私はAngular 2で始まり、このようなものは見つかりませんでした。

<div id="ls" fxFlexFill> 
    <md-table [dataSource]="dataSource" mdSort> 
     <!-- Add this for each ContentChildren of my component 
       <ng-container cdkColumnDef="id"> 
        <md-header-cell *cdkHeaderCellDef md-sort-header>ID</md-header-cell> 
        <md-cell *cdkCellDef="let row">{{row.id}}</md-cell> 
       </ng-container> 
     --> 
     <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
     <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
    </md-table> 
</div> 

とコンポーネント：

 <tabela-com-consulta [dataSource]="ds"> 
      <ng-container cdkColumnDef="id"> 
       <md-header-cell *cdkHeaderCellDef md-sort-header >ID</md-header-cell> 
       <md-cell *cdkCellDef="let row">{{row.id}}</md-cell> 
      </ng-container> 
      <ng-container cdkColumnDef="nome"> 
       <md-header-cell *cdkHeaderCellDef md-sort-header>Name</md-header-cell> 
       <md-cell *cdkCellDef="let row">{{row.name}}</md-cell> 
      </ng-container> 
     </tabela-com-consulta> 

は今、これは私のコンポーネントテンプレートです：私はタイトルで、私はこのように、コンテンツに設定された列定義を持つコンポーネントをしたと述べた方法

tsコード：

@Component({ 
    selector: 'tabela-com-consulta', 
    templateUrl: 'tabela_com_consulta.component.html', 
    styleUrls: ['tabela_com_consulta.component.css'] 
}) 
export class TabelaComConsultaComponent<T> implements OnInit, OnDestroy, AfterViewInit { 

[...] 

    @ContentChildren(CdkColumnDef) columnDefinitions: QueryList<CdkColumnDef>; 

    ngAfterViewInit() { 

    } 
} 

@ContentChildから取得したcolumnDefinitionsの使用方法がわかりませんmd-tableの内容を入力します。そして、私はこのことも正しくやっているのかどうかわかりません。私の目標は、コンポーネントの内容に列定義を持たせ、それをmdテーブルに取り込むことです。どうやってするか？

Answer 1

これを試してください。私はそれがうまくいくかどうか分からないが、ショットに値する。

<md-table [dataSource]="dataSource" mdSort> 

    <!-- This will selectively pass the content of 'tabela-com-consulta' --> 
    <ng-content select="[cdkColumnDef]"></ng-content> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
</md-table>