Primeng beta 10/Angular2 RC4 数据 table 样式未显示

Question

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

这是我的代码。代码仍然没有考虑条件，但我什至无法让趋势列中的单元格具有不同的颜色。这是我使用 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>

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

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

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

<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 使其适合单元格。尝试使用负边距。希望这对您有所帮助！

Primeng beta 10/Angular2 RC4 数据 table 样式未显示

Primeng beta 10/Angular2 RC4 data table styleing does not show up

primeng