angular - 如何将 columnDefinitions 从我的组件内容添加到 md-table
我正在学习 Angular 2,但没有找到类似的东西。
正如我在标题中所说,我有一个组件,其中列定义在内容中设置,如下所示:
<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>
现在这是我的组件模板:
<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>
以及组件的 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() {
}
}
我弄不清楚如何使用从 @ContentChildren 获取的 columnDefinitions 来放入 md-table 的内容。我也不知道我这样做是否正确。我的目标是在组件的内容中拥有列定义,并将其放入 md-table。该怎么做?
答案#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>
