0

我的项目中有一个 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 属性。所以我想我可以在插值大括号中编写一个简单的三元表达式来检查该列是否具有“选项”列标题并为我的按钮切换出可能的数据。

<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

4

2 回答 2

1

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

<button *ngIf="column == 'options';else other" mat-raised-button color="accent">Edit</button>
<ng-template #other>{{element[column]}}</ng-template>
于 2018-11-10T03:35:04.783 回答
1

是的，这就是结构指令的美妙之处，你不能在同一个标​​签中有两个指令 - 但你可以将一个指令包装到另一个

<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>
于 2018-11-10T03:39:07.610 回答