如何根据条件有条件地将行添加到 mat-table？

Question

我正在将功能从 div 转换/替换为 mat-table。 分区代码：

 <div *ngFor="let contract of vm.contracts; let j = index"> <div [ngClass]="getContractRowClass(contract)"> <div > <mat-checkbox color="primary" [(ngModel)]="contract.isSelected" class="filter_form_fiel pr-1" [disabled]="isDisabled(contract)" (change)="onContractChange($event, contract.number)" ></mat-checkbox> {{ contract.number }} </div> <div > {{ contract.productname }} </div> <div > {{ contract.statusName }} </div> </div> <div *ngIf=" contract.cancelTypeMessage.length > 0 " class="border border-black p-2 text-red-700" > {{ contract.cancelTypeMessage }} </div> </div>

在 div 中，我有条件地将 div 显示为一行并显示 contract.cancelTypeMessage 以指示如果条件为真则存在任何错误。

如何有条件地在 mat-table 中添加与条件行相同的功能？

垫表代码：

 <table mat-table [dataSource]="vm.contracts" class="flex-grow rounded w-full"> <ng-container matColumnDef="number"> <th mat-header-cell class="w-1/4" *matHeaderCellDef>{{ 'contractno' | translate }}</th> <td mat-cell *matCellDef="let element"> <mat-checkbox color="primary" [(ngModel)]="element.isSelected" class="filter_form_fiel pr-1" [disabled]="isDisabled(element)" (change)="onContractChange($event, element.number)" ></mat-checkbox> {{ element.number }} </td> </ng-container> <ng-container matColumnDef="productname"> <th mat-header-cell class="w-1/2" *matHeaderCellDef>{{ 'productname' | translate }}</th> <td mat-cell *matCellDef="let element" class="font-mono">{{ element.productname }}</td> </ng-container> <ng-container matColumnDef="statusName"> <th mat-header-cell class="w-1/4" *matHeaderCellDef>{{ 'contractstatus' | translate }}</th> <td mat-cell *matCellDef="let element" class="font-mono">{{ element.statusName }}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="columns"></tr> <tr mat-row *matRowDef="let row; columns: columns;"></tr> </table>

请参阅附图了解更多详情。 红色框带有 mat-table，黄色框带有 div。