web-dev-qa-db-ja.com

ngx-datatable rowClassが機能していません

この質問には、問題を解決するのに役立たなかったいくつかを見たように、すでに回答があるかもしれません。私の問題は、ngx-datatableのrowClassが機能しないことです。

データテーブルコード-test.component.html

<ngx-datatable class="material" 
            [rows]="rows" 
            [columnMode]="'force'" 
            [reorderable]="reorderable"
            [rowClass]="getRowClass"
            (activate)="onActivate($event)">
            <ngx-datatable-column name="Cabinet Name" [flexGrow]="1">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <mat-icon class='folder-color'>folder</mat-icon>
                    {{ row?.cabinetname }}
                </ng-template>
            </ngx-datatable-column>
</ngx-datatable>

TSコード-test.component.ts

getRowClass = (row) => {
   return {
     'row-color': true
   };
}

SCSSコード-test.component.scss

.row-color {
    background-color: green;
}

chrome開発者ツールでは、追加されたrow-colorクラスが表示されていますが、行は背景色として緑になっていません。何が問題なのかわかりません上記のコードを使用して、問題を解決する正しい方法を教えてください。

注：作業中です角度5

angularangular-materialngx-datatable
6
Javascript Lover - SKT

問題は、.row-colorのスコープがテストコンポーネントであるということです。カプセル化を解除するには、プレフィックスとして/deep/を付ける必要があります。

/deep/ .row-color {
  background-color: green;
}

または、ViewEncapsulation.Noneを使用して、CSSルールをアプリに適用できます。

または、このルールをグローバルアプリスタイル（1つのコンポーネントにバインドされていない）のどこかに配置する必要があります。

これが動作する Stackblitz です。

ViewEncapsulation.Noneの意味は次のとおりです。

作成したcssは、コンポーネントだけでなく、コンテキスト全体（ページ）にも適用されます。要素を検査すると、angularコンポーネントに<span _ngcontent-c15>...</span>のようなものがあることがわかります。コンポーネントのすべてのもの、angular属性_ngcontent-c15（または類似）のマークが付けられます。その場合、コンポーネントのすべてのスタイルは単にspanではなく、むしろspan[_ngcontent-c15]。スパンを赤でペイントしても、他のコンポーネントにはリークしません（たとえば、_content-c16になります）。ViewEncapsulation.Noneは、コンポーネントのCSSからその属性を削除して、ページ全体で有効です。

10
Zlatko

GetRowClass（）を適切な関数にすると、機能します。

getRowClass(row): string {
  return 'row-color';
}
3
rrd

ルートレベルのsrcフォルダー（index.htmlとmain.ts以外）のstyles.scssにcssを追加してみてください。

.row-color {
  background-color: green;
}

コンポーネントにスタイルを追加すると、スタイルが生成されます。
TL;DR;

参照：

  1. https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
  2. http://blog.ng-book.com/css-isolation-in-angular-2-components/
  3. CSSがmy angular component

更新

親から子セレクターへのスタイルを提供します。

つまり、セルにCSSを適用する場合は、次のようにセレクターを指定します

.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell.row-color{
    background-color: green;  
}

PS：これはあなたにグローバルなスタイルを提供してみてください.scss

0
Paritosh