如何在同一单元格上实现 *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 但它引发了错误。我做了一些搜索，发现我需要使用 <ng-container，所以我想出了以下内容：

<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>