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

Question

我开始玩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并在我的索引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" />

感谢您的帮助！

Answer 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" [style]="{'background-color':'blue'}">
     </p-column>
     <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>

Answer 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">
     <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。尝试使用负边距。希望这有帮助！