0

アプリに必要な UI の一部を取得するために、Primeng をいじり始めました。現在作業しているのはデータテーブルです。条件付きでスタイル設定されたダッシュボードを作成しようとしています。以下は、私が達成する必要があるもののスナップショットですが、スタイリングを表示できません。 ここに画像の説明を入力

これが私のコードです。コードはまだ条件を考慮していませんが、トレンド列のセルを別の色にすることさえできません。これが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 を使用しており、primeui に必要な css ファイルを次のようにインデックス html に含めました。

<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" />

助けてくれてありがとう！

ここに画像の説明を入力

4

2 に答える 2

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>
于 2016-08-09T05:48:01.073 に答える