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

Question

I have an 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>

It is throwing an error

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

Basically I want to see if the column equals 'slaStatus' and if it does, I want to display it as an angular material chip with its own color. How can I write the ngIf condition in a way that checks to see if the column equals 'slaStatus'?

(Typescript)

  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>

it is a type cores-ion error. *ngIf="column!=='slaStatus'" will be fine.