Angular material 2 table - 使用 TemplateRef 和 ngTemplateOutlet 定义列 [英] Angular material 2 table - define column using TemplateRef and ngTemplateOutlet

问题描述

我正在尝试制作可重复使用的材料表，并且我想使用 TemplateRef 和 ngTemplateOutlet 来生成列.在 this 示例中，我创建了 cards 组件，该组件使用我的 <代码>材料表组件.在 cards.component.html 中，我有一个表格列的模板.运行项目将导致错误 ERROR TypeError: Cannot read property 'template' of undefined(请参阅 stackblitz 上的控制台).是否可以将 columnt 模板传递给我的 MaterialTableComponent 并使用它来定义列?

I am trying to make reusable material table and I want to use TemplateRef with ngTemplateOutlet to generate columns. In this example I created cards components which is using my material-table component. In cards.component.html I have template of one of my table's column. Running the project will cause an error ERROR TypeError: Cannot read property 'template' of undefined (see console on stackblitz). Is it possible to pass columnt template to my MaterialTableComponent and use it to define column?

 <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 找到了解决方案.

UPDATE I found solution using 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>

查看我的示例

推荐答案

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

ADD THE FOLLOWING IN THE COMPONENT TO BE RE-USED

在.HTML"文件中:

In the '.HTML' file:

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

• [NgTemplateOutletContext] 数据将被发送到父组件.记住 '$implicit' 可以接收你想发送到 PAI 组件的任何数据

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

In the '.ts' file OF THE REUSABLE COMPONENT add the following code WITHIN YOUR CLASS

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

---

父组件(接收重复使用的组件)

---

FATHER COMPONENT (RECEIVES THE RE-USED COMPONENT)

在'.html'文件中添加以下代码

Add the following code to the '.html' file

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

---

---

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

---

---

That way you can send data from the child component to the parent component, so you can create dynamic columns for your table.

只是按照上面的步骤，但是，应用表的特定列...... EX:

Just follow the steps above, however, applying the specific columns of the table ... 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>

您可以为每一列创建一个参考名称，并重复该过程

YOU CAN CREATE A REFERENCE NAME FOR EACH COLUMN, AND REPEAT THE PROCESS

角度版本:9文档:https://angular.io/api/common/NgTemplateOutlet

• 文档没有显示 ngTemplateOutlet 在不同组件中的使用，但它已经在某些方面有所帮助.

这篇关于Angular material 2 table - 使用 TemplateRef 和 ngTemplateOutlet 定义列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！