Question

我需要根据if else条件在td上实现特定的类。如果您看到我的代码，那么我正在遍历th和td元素。如果th类名称等于Legal Class ID，则我需要将th中的文本留空或将颜色设置为白色，以使标题文本不可见。我创建了一个名为cellbgcolor的类。仅当标题文本为所有其他所有类别的Legal Class ID时，我才需要应用，它应该将class 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

尝试类似的操作：

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

或

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

Answer 2

尝试一下，希望对您有所帮助。

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

OR

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

Answer 3

使用ngClass

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

更新了Fiddle

需要根据表标题中的条件应用类

3 个答案: