Question

我试图在我的角度应用程序代码中循环使用tr并且需要将样式应用于特定行。我会有几个这样的行

例如

<tbody>
    <tr *ngFor="let row of fsIncomeStatementTable | slice:1">
        <td style="padding:6px 10px; border-bottom: 1px solid #d8d8d8;">{{row[0]}}</td>
        <td *ngFor="let cell of row | slice:1" style="padding:6px 10px; border-bottom: 1px solid #d8d8d8;">{{cell | shortAndBlankNumberFormat: 2}}</td>
    </tr>
</tbody>

这将是实际内容。我需要搜索包含Net Premiums Written的那一行并应用class net-cost

 <tbody>
     <tr>
        <td>Direct premiums written</td>
        <td>33,150,000</td>
        <td>33,813,000</td>
        <td>35,179,045 </td>
        <td>35,882,626 </td>   
        <td>35,882,626 </td>                                                          
     </tr>
     <tr>
        <td>Assumed premiums written</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>  
        <td>-</td>                                                          
      </tr>
      <tr>
        <td class="net-cost">Net Premiums Written</td>
        <td class="net-cost">-</td>
        <td class="net-cost">-</td>
        <td class="net-cost">-</td>
        <td class="net-cost">-</td> 
        <td class="net-cost">-</td>                                                           
      </tr>
</tbody>

Answer 1

<强> HTML

<tbody>
    <tr *ngFor="let row of fsIncomeStatementTable | slice:1" [ngClass]="{'net-cost': row[0] == 'Net Premiums Written'}">
        ...
    </tr>
</tbody>

<强> CSS

.net-cost {
    background: #FF0000;
}

如果你想匹配多个字符串，你可以这样做：

[ngClass]="{'net-cost': row[0] == 'Net Premiums Written' || row[0] == 'any other string' || row[0] == 'some more to match'}"

在角度特定行上应用样式

1 个答案: