如何在循环元素上使用 ngIf 语句

Question

我有一个 angular material table:

(HTML)

<table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
        class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
    <ng-container *ngIf="!column=='slaStatus'">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>
    <ng-container *ngIf="column=='slaStatus'" matColumnDef="{{column}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> SLA</th>
        <td mat-cell *matCellDef="let element">
            <mat-chip-list aria-label="Fish selection">
                <mat-chip *ngIf="element.slaStatus=='On Time'" style="background-color: #B9F6CA; color: green">On Time</mat-chip>
                <mat-chip *ngIf="element.slaStatus=='Late'" style="background-color: #B9F6CA; color: yellow">Late</mat-chip>
                <mat-chip *ngIf="element.slaStatus=='Missing'" style="background-color: #ec9d9d; color: red">Missing</mat-chip>
            </mat-chip-list>
        </td>
    </ng-container>
  </ng-container>

正在抛出错误

<ng-container *ngIf="!column=='slaStatus'">
error TS2367: This condition will always return 'false' since the types 'boolean' and 'string' have no overlap

基本上我想看看该列是否等于 'slaStatus'，如果是，我想将其显示为具有自己颜色的 angular material 筹码。如何以检查列是否等于 'slaStatus'?

的方式编写 ngIf 条件

（打字稿）

  displayedColumns: string[] = [
    'id',
    'tradingPartnerTradingPartner',
    'fileFormatFileFormat',
    'slaStatus',
  ];

Answer 1

<table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
        class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
    <ng-container *ngIf="column!=='slaStatus'">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>
    <ng-container *ngIf="column=='slaStatus'" matColumnDef="{{column}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> SLA</th>
        <td mat-cell *matCellDef="let element">
            <mat-chip-list aria-label="Fish selection">
                <mat-chip *ngIf="element.slaStatus=='On Time'" style="background-color: #B9F6CA; color: green">On Time</mat-chip>
                <mat-chip *ngIf="element.slaStatus=='Late'" style="background-color: #B9F6CA; color: yellow">Late</mat-chip>
                <mat-chip *ngIf="element.slaStatus=='Missing'" style="background-color: #ec9d9d; color: red">Missing</mat-chip>
            </mat-chip-list>
        </td>
    </ng-container>
  </ng-container>

这是一个核心离子类型错误。 *ngIf="column!=='slaStatus'" 会好的。

如何在循环元素上使用 ngIf 语句

How to use ngIf statement on a looping element

html

css

typescript

angular-material

angular