Primeng beta 10/Angular2 RC4 数据表样式不显示答案

【问题标题】：Primeng beta 10/Angular2 RC4 data table styleing does not show upPrimeng beta 10/Angular2 RC4 数据表样式不显示
【发布时间】：2016-11-26 10:29:33
【问题描述】：

我开始使用 Primeng 来获取我的应用所需的一些 UI。当前使用的是数据表。我正在尝试创建一个有条件样式的仪表板。以下是我需要实现但无法显示样式的快照。

这是我的代码。代码仍然没有考虑条件，但我什至无法让趋势列中的单元格具有不同的颜色。以下是我使用 primeng beta 10 的试验：

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend" [style.background-color]="blue">

            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>

 </p-dataTable>

我什至尝试了 primefaces 演示的模板模式，但没有运气：

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend">
                <template let-col let-row="rowData">
                    <span [style.background-color]="blue">{{row[col.field]}}</span>
                </template>
            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>
 </p-dataTable>

这两个代码都生成了我的表格的下面相同的快照。我做错了什么？

PS：我正在使用 webpack，并且在我的 index html 中包含了 primeui 所需的 css 文件，如下所示：

<link rel="stylesheet" type="text/css" href="./css/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./css/theme.css" />

感谢您的帮助！

【问题讨论】：

标签： primeng

【解决方案1】：

如果您不想要标题颜色，请尝试这种方式。

<p-dataTable [value]="perfData" >
   <p-column field="Title" header="Title"></p-column>
   <p-column field="Curr Test" header="Curr Test"></p-column>
   <p-column field="Trend" header="Trend">
     <template let-col let-row="rowData">
        <div [style.background-color]="(row[col.field] == header) ? 'none' : 'blue'">
          <span>{{ row[col.field] }}</span>
        </div>
     </template>
   </p-column>
   <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>

您应该修改 div 标签的 CSS，使其适合单元格。尝试使用负边距。希望这会有所帮助！

【讨论】：

谢谢@Gayan，我确实尝试了模板并且工作但没有使用你拥有的这种语法，我的这种语法不起作用。我使用了
{{row[col.field]}}
，好在这样使用模板时标题不会受到影响。正如你提到的，我必须使用 css 以使 div 适合单元格。
不客气@Afi。对我来说，这很有效。我使用的是最近发布的 PrimeNG Beta 12。所以我认为这就是它不起作用的原因。
@Afi：有关如何使 div 适合单元格并消除周围空白的示例，请参阅我对相关问题 stackoverflow.com/a/42013275/7307355 的回答。

【解决方案2】：

我有同样的问题。我能够以这种方式修复它。

<p-dataTable [value]="perfData" >
     <p-column field="Title" header="Title"></p-column>
     <p-column field="Curr Test" header="Curr Test"></p-column>
     <p-column field="Trend" header="Trend" [style]="{'background-color':'blue'}">
     </p-column>
     <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>

【讨论】：

感谢 Gayan 的回复，以这种方式设置样式有效，但这将为包括标题在内的整个列着色。