如何在Angular Material数据表插值里面使用三元表达式来显示html

Question

我的项目中有一个 Angular Material 数据 table 设置。我的项目使用多个 table 来显示各种数据源（客户、提供者、学员、公司），所以我的目标是在一个组件中使用一个数据 table，并动态传递数据、列等来自给定的服务。

<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'];

所以这一块动态构建了完整的 table 内容。你注意到我在最后有选项栏。数据源中不存在此字段，它用于容纳按钮组，以便我可以提供删除或编辑相应行等功能。

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

<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 在我打开模板文字编写按钮后立即抱怨 'unclosed string literal' 并且当在屏幕上呈现时，它没有给出任何错误但是把我的 table

然而，如果我不 return 三元中的任何 HTML 元素，我就不会出错，并且 table 会像我期望的那样

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

我还尝试从三元函数中调用一个函数，该函数 return 将 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>

如何在Angular Material数据表插值里面使用三元表达式来显示html

How to use a ternary expression inside Angular Material Datatable interpolation to display html

typescript

angular

angular-material-7