Нужно применять класс на основе условия в заголовке таблицы

Question

Мне нужно реализовать конкретный класс на основе т. Д. На основе условия if else.Если вы видите мой код, я перебираю элементы th и td.Мне нужно либо очистить текст в th, либо установить белый цвет, если имя класса th равно идентификатору Legal Class, чтобы текст заголовка не отображался.Я создал класс под названием cellbgcolor.Мне нужно применять только в том случае, если текст заголовка является Legal Class ID для всех остальных, он должен применять класс tableItem жирным шрифтом.Как я это сделал.Я поделился html и jsfiddle ниже

html

  <style>
      .cellbgcolor {
        color: white;
    }
   </style>

    <div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
         <table class="fundClassesTable table-striped">
          <tr *ngFor="let c of ColumnNames">
            <th class="tableItem bold">{{ c }}</th>
            <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
              <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
              <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
              <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td
            </ng-container>
          </tr>
        </table>
      </div>

 Component



  public ColumnNames: string[] = ['Legal Class Name',
                                    'Last Edited',
                                    'Legal Class ID'
                                  ];

Вот JSFiddle

https://jsfiddle.net/zyk9xhd1/2/

Answer 1

Попробуйте, надеюсь, это поможет ..

<th [ngClass]="{'cellbgcolor':c == ColumnNames[2],'tableItem bold':c != ColumnNames[2]}">{{ c }}</th>

OR

<th [ngClass]="c == ColumnNames[2] ? 'cellbgcolor' : 'tableItem bold'">...</th>

Answer 2

Использование ngClass

`<th [ngClass]="c == ColumnNames[2] ? 'cellbgcolor' : 'tableItem bold'">{{ c }}</th>`

Обновлено Скрипка

Answer 3

попробуйте что-то вроде этого:

<td [class.tableItem]="booleanCondition" [class.cellbgcolor]="booleanCondition">...</td>

или

<td [class]="booleanCondition ? 'tableItem' : 'cellbgcolor'">...</td>