如何在同一个单元格上实现 *matCellDef 和 *ngif

Question

我最初创建了一个静态 HTML 表格，我在其中根据单元格中的值设置公式和 css：

<td *ngIf="r.Num_Of_Days !== 0 "(click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
    {{r.Num_Of_Days}}
</td>
<td *ngIf="r.Num_Of_Days === 0 "></td>

我不得不改为使用 Angular Material，因为列名是动态的，我必须使用 columnstodisplay 指令来确定要显示的列。我尝试在其中使用 *matCellDef 和 *ngIf 但它引发了错误。我做了一些搜索，发现我需要使用

<td mat-cell *matCellDef="let r">
    <ng-container *ngIf="r.Num_Of_Days !== 0;else conditionNotMet" 
       (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
        {{r.Num_Of_Days}}
    </ng-container>
</td>
<ng-template #conditionNotMet></ng-template>

这可以填充数据，但它不会将函数或 css 应用于单元格。如何正确应用 css 和函数，以便当值为 0 时没有点击事件且单元格不着色，并且如果值大于 0，则应用函数和格式？

Answer 1

1. 你不能在一个元素上使用两个结构指令，所以是的！你应该把 *ngIf 放在另一个元素上。

2. 您的样式和事件侦听器功能不起作用，因为您使用了最终结果中未创建的 ng-container。

解决方案。只需将逻辑放入一个 div 元素中

<td mat-cell *matCellDef="let r">
    <ng-container *ngIf="r.Num_Of_Days !== 0;else conditionNotMet">
        <div (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
          {{r.Num_Of_Days}}
        </div>
    </ng-container>
</td>

或者在 div 上使用 *ngIf

<td mat-cell *matCellDef="let r">
       <div *ngIf="r.Num_Of_Days !== 0;else conditionNotMet"                    (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
          {{r.Num_Of_Days}}
        </div>
</td>