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

问题描述

我正在尝试制作可重复使用的材质表，并且我想将 TemplateRef 与 ngTemplateOutlet 一起使用来生成列.在此示例中，我创建了 cards 组件，这些组件使用了我的材料表组件.在 cards.component.html 中，我具有表之一列的模板.运行项目将导致错误 ERROR TypeError:无法读取未定义的属性'template'(请参见 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]数据将发送到父组件.请记住，"$隐式"可以接收您要发送到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在不同组件中的使用，但已经在某些方面有所帮助.

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