角材料 2 表 - 使用 TemplateRef 和 ngTemplateOutlet 定义列答案

【问题标题】：Angular material 2 table - define column using TemplateRef and ngTemplateOutlet角材料 2 表 - 使用 TemplateRef 和 ngTemplateOutlet 定义列
【发布时间】：2019-03-19 15:02:40
【问题描述】：

我正在尝试制作可重复使用的材料表，我想使用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

【问题讨论】：

ngTemplateOutletContext 是我所缺少的。谢谢！

标签： html angular angular-material2 angular-material-table

【解决方案1】：

在要重用的组件中添加以下内容

在“.HTML”文件中：

<ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container>

[NgTemplateOutletContext] 数据将被发送到父组件。请记住，“$implicit”可以接收您想要发送到 PAI 组件的任何数据

在可重用组件的“.ts”文件中，在您的类中添加以下代码

@ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;

父组件（接收重新使用的组件）

将以下代码添加到“.html”文件中

<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>

这样您可以将数据从子组件发送到父组件，这样您就可以为您的表格创建动态列。

不过，只需按照上述步骤，应用表格的特定列...例如：

  <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

文档没有显示在不同组件中使用 ngTemplateOutlet，但它已经有所帮助。

【讨论】：