web-dev-qa-db-ja.com

スタイルクラスをp-dataTable行に追加する方法

PrimeNG 1.0.0-beta.16のp-dataTableを使用しています

値がtrueのときに行にスタイルを追加したい。セルでこれを行う方法を考え出しましたが、行全体の背景を変更する必要があります。

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]="!timePeriod.IsNext">は機能しているがrowStyleClass="missingPeriod"は違います。

ご意見をお聞かせください。

更新された構文：

V1.0.1に更新

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

そしてTypeScript：

public customRowClass(rowData, rowIndex): string {
    console.log("In customRowClass");
    console.log(rowData);
    console.log(rowIndex);
    return "";
}

customRowClassの中には何も記録されません。私には、このメソッドは呼び出されていないようです。

angularangular2-templateprimeng
14
Paul Meems

rowStyleClassは、あなたが思っているよりも少し異なる動作をします。入力として関数を受け取り、文字列（CSSクラス名）を返します。 PrimeNG DataTable docs にリストされています。

私のHTMLには次のものがあります：

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>

コンポーネント内：

lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

グローバルCSSファイル内：

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}

それでも解決しない場合は、最新バージョンにアップグレードする必要があります。 PrimeNG 1.0.0 RC5は2016年11月にリリースされます。

22
Jon Onstott

のようだ scrollable="true"がこの原因です。 scrollableがtrueに設定されている場合、getRowStyleClassのバインディングを持たない別のテンプレートが使用されます。

ここでは、<tr>は、notスクロール可能なテーブルには、getRowStyleClassのバインディングがあります： https://github.com/ primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts＃L18

しかし <tr>スクロール可能なテーブルにはバインディングがありません： https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

this Plunkr で両方のケースを見ることができ、問題を投稿しました here 。

スクロール可能なテーブルでメソッドを使用できない理由がわからないので、監視できる here の修正を含むPRを提出しました。

0
Benjamin