我正在尝试制作可重复使用的物料表,并且想将TemplateRef
与ngTemplateOutlet
一起使用来生成列。在this示例中,我创建了cards
个组件,这些组件正在使用我的material-table
组件。在cards.component.html
中,我有一个表列的模板。运行项目将导致错误ERROR TypeError: Cannot read property 'template' of undefined
(请参阅stackblitz
上的控制台)。是否可以将columnt模板传递给我的MaterialTableComponent
并使用它来定义列?
<table mat-table [dataSource]="data" class="mat-elevation-z4">
<ng-container
*ngFor="let column of displayedColumnObjects"
[matColumnDef]="column.id"
>
<!-- if where is cellTemplate in table config json, use cellTemplate -->
<ng-container
*ngIf="column.cellTemplate"
[ngTemplateOutlet]="column.cellTemplate"
>
</ng-container>
<ng-container *ngIf="!column.cellTemplate">
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
更新
我找到了使用ngTemplateOutletContext
的解决方案。
<table mat-table [dataSource]="data" class="mat-elevation-z4">
<ng-container
*ngFor="let column of displayedColumnObjects"
[matColumnDef]="column.id"
>
<ng-container
*ngIf="column.cellTemplate"
>
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element">
<ng-template
[ngTemplateOutletContext]="{
element: element[column.id]
}"
[ngTemplateOutlet]="column.cellTemplate">
</ng-template>
</td>
</ng-container>
<ng-container *ngIf="!column.cellTemplate">
<th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
看到我的example
答案 0 :(得分:0)
添加了要重复使用的组件
在“ .HTML”文件中:
<ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container>
在可重用组件的“ .ts”文件中,在您的课程中添加以下代码
@ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;
父亲组件(接受重复使用的组件)
将以下代码添加到“ .html”文件中
<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>
这样,您可以将数据从子组件发送到父组件,从而可以为表创建动态列。
只需按照上述步骤操作,但是,应用表格的特定列... EX:
<td> <ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container> </td>
添加到孩子的.ts:
@ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;
在父组件中:
<my-table>
...
<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>
<! - this content will be rendered inside the table ... ->
...
</my-table>
您可以为每个列创建一个引用名称,然后重复该过程
角度版本:9 文档:https://angular.io/api/common/NgTemplateOutlet