如何使用 Angular Material Table 值的条件格式

Question

我有一个 mat-table 工作正常，所有值都完全按照 DB

返回的格式显示

  <mat-table #table [dataSource]="queryResults" matSort >

    <ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column.name}}">
      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.viewValue }}</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item[column.name]}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsKeys; sticky: true" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumnsKeys;"></mat-row>

  </mat-table>

每个项目的数据结构看起来像这样。数据库返回了超过 300 列，用户可以从中 select，所以我不想硬编码 table 定义，而是我有一个 JSON 结构来定义列及其值

 export interface SearchFields {
    name: string;
    viewValue: string;
    fieldType?: string;
    dispFormat?: string;
  }

现在我想使用 dispFormat 有条件地格式化一些值。 dispFormat 的可能值为 ''（留空）currency 或 number 我不确定如何实现货币或数字管道，或者没有基于列定义的格式。我试过添加 *ngIf 这是不正确的


<mat-table #table [dataSource]="queryResults" matSort >

    <ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column.name}}">
      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.viewValue }}</mat-header-cell>
      <ng-template #currValue *ngIf="column.dispFormat=='currency'" ><mat-cell *matCellDef="let item" >{{item[column.name] | currency:'USD':true:'2.2-4'}}</mat-cell></ng-template>
      <ng-template #noFormatValue *ngIf="column.dispFormat==''" > <mat-cell *matCellDef="let item" >{{item[column.name]}}</mat-cell></ng-template>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsKeys; sticky: true" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumnsKeys;"></mat-row>

  </mat-table>

但是由于混合 *ngIf 和 *matCellDef

这会产生错误

ERROR TypeError: Cannot read property 'template' of undefined

如何根据条件设置值的格式？

编辑 - 根据要求，添加示例数据
示例数据源是：

[{name: 'Company A',
accountspayable: 172286000,
accumulatedamortization: null,
beta: 0.5718,
bookvalue: 15.128,
buy: 0},
{name: 'Company B',
accountspayable: 112676000,
accumulatedamortization: 1689965,
beta: 0.5,
bookvalue: 27.5,
buy: 1},
{name: 'Company C',
accountspayable: 126546000,
accumulatedamortization: 1889965,
beta: 0.168,
bookvalue: 10,
buy: 5}
]

列定义为：

[
{ name: 'name', viewValue: 'Name',dispFormat: '' },
{ name: 'accountspayable', viewValue: 'Accounts Payable', dispFormat: 'currency' },
{ name: 'accumulatedamortization', viewValue: 'Accumulated Amortization', dispFormat: 'currency' },
{ name: 'beta', viewValue: 'Beta', dispFormat: 'number' },
{ name: 'bookvalue', viewValue: 'Book Value', dispFormat: 'currency' },
{ name: 'buy', viewValue: 'Buy', dispFormat: 'number' }
]

Answer 1

您可能想尝试不更改 mat table 语法：

      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.viewValue }}</mat-header-cell>
      <ng-template #currValue *ngIf="column.dispFormat=='currency'" ><mat-cell *matCellDef="let item" >{{item[column.name] | currency:'USD':true:'2.2-4'}}</mat-cell></ng-template>
      <ng-template #noFormatValue *ngIf="column.dispFormat==''" > <mat-cell *matCellDef="let item" >{{item[column.name]}}</mat-cell></ng-template>
    </ng-container>```

could be changed to

```<ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column.name}}">
      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.viewValue }}</mat-header-cell>
      <mat-cell *matCellDef="let item" >
        <span *ngIf="column.dispFormat=='currency'">{{item[column.name] | currency:'USD':true:'2.2-4'}}</span>
        <span *ngIf="column.dispFormat==''">{{item[column.name]}}</span>
      </mat-cell>
   </ng-container>

Answer 2

我找到了答案，就是把 ngIf 放在 mat-cell 里面

  <mat-table #table [dataSource]="queryResults" matSort >

    <ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column.name}}">
      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.viewValue }}</mat-header-cell>
      <mat-cell *matCellDef="let item">
        <div *ngIf="column.dispFormat=='currency'">
          {{item[column.name] | currency:'USD':true:'2.0-4'}}
        </div>
        <div *ngIf="column.dispFormat=='number'">
          {{item[column.name] | number : '2.0-4'}}
        </div>
        <div *ngIf="column.dispFormat==''">
          {{item[column.name]}}
        </div>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsKeys; sticky: true" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumnsKeys;"></mat-row>

  </mat-table>

如何使用 Angular Material Table 值的条件格式

How to use conditional formatting of Angular Material Table values

angular-material

angular