Question

我已经在SO中搜索以下查询，但是我没有正确找到解决方法。在mat td单元格悬停时，将有删除图标。但是该删除图标只能用于新增加的价值，因此我尝试如下操作。

        <td mat-cell *matCellDef="let element" class="
            " style="min-width: 310px !important" [ngClass] = 
            "{'border-orange':element.attrname != 'Total Cost' && element.attrname != 'Overall Cost',  
               'delIcon':element.attrname != 'Total Cost' 
              && element.attrname != 'Overall Cost' 
              && element.attrname != 'Daily Rate'
              && element.attrname != 'Drop Rate'}">
              <span class="dynamiccol " ><i class="far fa-times-circle" (click)="deleteassumption(column)"></i></span>
              {{element.attrname}}
    </td>

但是我没有得到正确的输出，有人可以帮我吗。

Answer 1

您需要以更好的方式解构条件和类。一种方法是通过Angular中的[class.foo]="isTrue"方法拆分类。如果满足条件，则可以添加类，只是另一种方式。

因此，在此示例中，如果满足foo条件，它将向DOM添加类isTrue。

转到您的代码。

[class.border-orange]="element.attrname != 'Total Cost' && element.attrname != 'Overall Cost'"

[class.delIcon]="element.attrname != 'Total Cost' && element.attrname != 'Overall Cost'" && element.attrname != 'Daily Rate' && element.attrname != 'Drop Rate'"

结果为：

<td mat-cell *matCellDef="let element" style="min-width: 310px !important" 
[class.border-orange]="element.attrname != 'Total Cost' && element.attrname !== 'Overall Cost'" 
[class.delIcon]="element.attrname != 'Total Cost' && element.attrname != 'Overall Cost'" && element.attrname !='Daily Rate' && element.attrname !='Drop Rate'">
    <span class="dynamiccol">
        <i class="far fa-times-circle" (click)="deleteassumption(column)"></i> 
    </span>
  {{element.attrname}}
</td>

尽管不建议在HTML模板中进行太多比较，因为它可能会变得凌乱。除此之外，strict comparisons可能是一个更好的选择。

在[ngclass]中添加多个类

1 个答案: