html 在td中使用ngFOR时,如果列名来自变量,是否有方法在angular中应用基于多列的条件格式?

dfddblmv  于 2022-12-16  发布在  Angular
关注(0)|答案(1)|浏览(116)

我在我的Angular 项目中遇到了一个问题。我使用一个变量,即csvColumnHeaders作为我的列名,因为很少有列名会不断变化。其余列名是静态的。
我的数据变量对象是vfyieldInfo
我在ngfor循环中使用**yield[column]**来显示每列的数据。
问:我想根据一个固定名称列对另一个固定名称列应用条件颜色格式。由于没有为每列设置单独的颜色格式,该如何操作?

<table class="table table-bordered" align="center">
  <thead>
  <tr align="center" class="myHeaderClass">
    <th
      *ngFor="let column of csvColumnHeaders"
      scope="col"
      class="headerGrey"
    >
      {{ column }}
    </th>
  </tr>
  </thead>
  <tbody>
  <tr align="center" *ngFor="let yield of vfyieldInfo">
    <td *ngFor="let column of csvColumnHeaders">
      <p class="{{ column }}">{{ yield[column] }}</p>
    </td>
  </tr>
  </tbody>
</table>

谢谢Ankit
我希望应用多个基于列的条件格式。但是,我无法应用它,因为我没有每个列的单独条目。背后的原因是,我正在使用一个可变对象的列名,因为很少列名保持变化。
对名称不变的列应用条件格式。

hec6srdp

hec6srdp1#

使用ngStyle表示支持条件大小写。

示例

<td *ngFor="let column of csvColumnHeaders" 
    [ngStyle]="{'background-color': (column=='id') ? 'black' : 'white'}">
  <p class="{{ column }}">{{ yield[column] }}</p>
</td>

参考:Document

相关问题