PrimeNg p-column在td中应用css不起作用

Question

我使用的是p-dataTable，我想在td中应用一种风格，但这种风格取决于字段的价值而且我不知道它是怎么做的。我的代码是：

<p-dataTable [value]="cars" resizableColumns="true" [responsive]="true" reorderableColumns="true">
  <p-column [styleClass]="carStyle" field="carDesc"></p-column>
  <p-column styleClass="ui-model-car" field="carModelDesc"></p-column>
  <p-column styleClass="ui-width-icon-car">
     <template let-col let-item="rowData" pTemplate type="body">
      <div data-toggle="tooltip" data-placement="left" title="{{item.typeCarDesc}}">
          <span class="icon-circle {{item.typeCarIcon}} {{item.carColor}}"></span>
      </div>
     </template>
  </p-column>
</p-dataTable>

carStyle可能是空的或ui-without-border-top和我的css：

td.ui-without-border-top {border-top-style: hidden;}

在我生成的html代码中，我没有看到carStyle。我需要td中的风格。

Answer 1

在这种情况下，请检查 carStyle 类是否已添加到<td>。

我将展示我是如何做到这一点的，没有任何问题：

在我的模板中：

<p-column styleClass="col-button">

我的Scss：

table {
    tbody
    {
        td.col-button {
            text-align: center;
        }
    }
}

请参阅下面的屏幕截图，了解它没有问题的效果：

请检查您的代码，然后重试。如果你的问题不起作用，请发帖。