I am working with 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"&qt; {{element[column]}} </td>
</ng-container>
<ng-container *ngIf="column=='slaStatus'" matColumnDef="{{column}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header&qt; SLA</th>
<td mat-cell *matCellDef="let element"&qt;
<mat-chip-list aria-label="Fish selection">
<mat-chip *ngIf="element.slaStatus=='On Time'" style="background-color: #B9F6CA; color: green&qt; On Time</mat-chip>
<mat-chip *ngIf="element.slaStatus=='Late'" style="background-color: #B9F6CA; color: yellow&qt; Late</mat-chip>
<mat-chip *ngIf="element.slaStatus=='Missing'" style="background-color: #ec9d9d; color: red&qt; Missing</mat-chip>
</mat-chip-list&qt;
</td>
</ng-container&qt;
</ng-container&qt;
An issue occurred while implementing this code
<ng-container *ngIf="!column=='slaStatus'">
error TS2367: This condition will always return 'false' since the types 'boolean' and 'string' have no overlap
The main goal is to differentiate and format the 'slaStatus' column as a distinct chip in the Angular Material table. How can I adjust the ngIf condition to specifically target the 'slaStatus' column?
(Typescript)
displayedColumns: string[] = [
'id',
'tradingPartnerTradingPartner',
'fileFormatFileFormat',
<mark>'slaStatus',</mark>
];