добавить несколько классов внутри [ngclass]

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

Вам нужно деконструировать свои условия и классы лучше. Один из способов сделать это - разделить классы с помощью метода [class.foo]="isTrue" в Angular. Это просто другой способ добавить классы, если выполняется условие.

Так что в этом примере он добавит класс 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 шаблон, потому что это может стать грязным. Кроме того, строгое сравнение может быть лучшим вариантом.