如何在Angular Material Datatable插值中使用三元表达式来显示html

Question

我的项目中有一个Angular Material Datatable设置。我的项目使用几个表来显示各种数据源（客户，提供者，受训者，公司），因此我的目标是在组件中使用一个数据表，并从给定的服务中动态传递数据，列等。

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
  <td mat-cell *matCellDef="let element">
    {{  element[column]   }} // I need to use an expression here
  </td>
</ng-container>

我的专栏是如此

  displayedColumns: string[] = ['name', 'address1', 'city', 'postcode', 'region', 'options'];

因此，这一块动态地建立了整个表的内容。您会注意到我在选项列的最后。该字段在数据源中不存在，它用于容纳一个按钮组，因此我可以提供诸如删除或编辑相应行之类的功能。

我不能在'mat-cell'元素上使用结构指令，因为它已经具有* matCellDef属性。因此，我想可以在插值括号内编写一个简单的三元表达式，以检查该列是否具有“ options”列标题，并为我的按钮切换出可能的数据。

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
  <td mat-cell *matCellDef="let element">
    {{  column == 'options' ? '<button mat-raised-button color="accent">Edit</button>' : element[column]   }}
  </td>
</ng-container>

但是我的IDE在打开模板文字以编写按钮后立即抱怨“未封闭的字符串文字”，并且在屏幕上呈现时，它没有给出错误，但使我的表有些混乱

但是，如果我不从三进制返回任何HTML元素，则不会出现任何错误，并且该表将按预期运行

{{  column == 'options' ? 'options column' : element[column]   }}

我还尝试了从三元调用一个函数，该函数将html返回到模板中，但是它被转义了。

有人可以建议我如何在通过三元条件的行中呈现按钮吗？

"@angular/material": "^7.0.3",
"@angular/core": "~7.0.0",

TIA

Answer 1

您可以使用ngIf和else语法，如下所示：

<button *ngIf="column == 'options';else other" mat-raised-button color="accent">Edit</button>
<ng-template #other>{{element[column]}}</ng-template>

Answer 2

是的，这是结构指令的优点，您不能在同一标记中包含两个指令-但您可以将一个指令包装到另一个

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
  <ng-container *ngIf="column != 'options'">
     <td mat-cell *matCellDef="let element">
       {{  element[column]   }} // I need to use an expression here
     </td>
  </ng-container>
  <ng-container *ngIf="column === 'options'">
     <td mat-cell *matCellDef="let element">
       <button mat-raised-button color="accent">Edit</button>
     </td>
  </ng-container>
</ng-container>

这是否则可以使用if和else

的一种方法

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
      <ng-container *ngIf="column != 'options'; else opt">
         <td mat-cell *matCellDef="let element">
           {{  element[column]   }} // I need to use an expression here
         </td>
      </ng-container>
      <ng-template #opt>
         <td mat-cell *matCellDef="let element">
           <button mat-raised-button color="accent">Edit</button>
         </td>
      </ng-template>
    </ng-container>