PrimeNg 数据表样式单元格答案

【问题标题】：PrimeNg Datatable style a cellPrimeNg 数据表样式单元格
【发布时间】：2017-08-20 19:04:39
【问题描述】：

我使用 PrimeNg 数据表如下，我需要为每个单元格放置一个特定的 css 类我可以将 css 类作为来自模型的 [class]="cssClassName" 传递，但该类仅在控件获得焦点时应用。有没有办法在不需要集中控制的情况下应用类？

提前致谢。

这个例子就像它出现在文档中一样

<p-dataTable [value]="cars" [editable]="true" resizableColumns="true">
    <p-column *ngFor="let col of cols,  let c = index" [field]="col.Field" [header]="col.Text" [editable]="true" > 
    <ng-template let-col let-car="rowData" pTemplate="editor" let-r="rowIndex">
      <div [class]="cssClassName">
         <input [(ngModel)]="car[col.field]" appendTo="body" [class]="cssClassName">
      </div>
    </ng-template>

    </p-column>
</p-dataTable>

【问题讨论】：

标签： css angular primeng primeng-datatable

【解决方案1】：

您可以应用 styleClass 以便它反映在您的单元格上。

<p-column [style]="{'text-align':'left'}" field="Field Name" header="Header" [sortable]="true" styleClass="test">

【讨论】：

这有效吗，我们如何使用“bodyStyle”？

【解决方案2】：

您可以根据特定条件为每行和每个单元格应用 styleClass

 <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [ngClass]="rowData.year > 2010 ? 'new-car' : null">
        <td *ngFor="let col of columns" [ngClass]="rowData[col.field] <= 2010 ? 'old-car' : null">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

您可以在https://www.primefaces.org/primeng/#/table/style找到更多信息

【讨论】：