AngularMaterialテーブルの行の色を変更します

Ibanez1408

セルの値に応じてマテリアルテーブルの行の色を変更するにはどうすればよいですか。

私はこれを私のHTMLに持っています

<mat-table [dataSource]="dataSource" class="mat-elevation-z2" style="margin-bottom: 10px;" matSort>

    <ng-container matColumnDef="DateAdded">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Submission Time </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.DateAdded | date: 'medium'}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="StartDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.StartDate | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="EndDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> End Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.EndDate | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="IsGranted">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Granted </mat-header-cell>
        <mat-cell *matCellDef="let row"  [ngClass]="row.IsGranted ? 'make-green' : ''"> {{row.IsGranted}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Remarks">
        <mat-header-cell *matHeaderCellDef> Remarks </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color">
        <button class="btn btn-dark btn-sm" (click)="viewRemarks(row.Remarks)">Select</button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="{'make-green': row.IsGranted==true}"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;">
                </mat-row>
    </mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

そして私のCSS

.make-gold {
    background-color: gold
}

これにより、次の結果が生成されます。 ここに画像の説明を入力してください

必要なのは、行全体の背景色を変更することです。細胞だけではありません。ありがとうございました。

レオパル

値がtrueのmake-goldときにクラスを適用したいと思いIsGrantedます。この場合は、次のことを試してください。

<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'make-gold': row.IsGranted }">

stackblitzデモも参照してください

編集

省略構文もあります。

<mat-row ... [class.make-gold]="IsGranted" [class.another-class]="true">

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jQuery:テーブルの行の色を変更しますか?

分類Dev

javafxテーブルの行は色を変更しません

分類Dev

データテーブルはrowcallbackで行の色を変更します

分類Dev

jQueryを使用してテーブルの行の色を変更する方法

分類Dev

C#は、マウスをホバーするとテーブルの行の色を変更します

分類Dev

TypeScriptを介してAngularMaterial拡張テーブルの行を展開します

分類Dev

Bootstrapストライプテーブルの単一行の色を変更します

分類Dev

jQueryでJavascriptで作成したテーブルの色を変更しますか?

分類Dev

しきい値に応じてテーブルの色を変更します

分類Dev

行をホバーしながらprimefacesデータテーブルの行の色を変更する方法

分類Dev

2行ごとにテーブルの行の色を変更する

分類Dev

ホバー時にテーブルの行の色を変更する方法

分類Dev

cssセレクターでテーブルの行の色を変更する

分類Dev

テーブルの値に基づいて行の色を変更する

分類Dev

ブートストラップ4ベータテーブルの行の境界線の色を変更しますか?

分類Dev

AngularMaterialの色はカスタムテーマを使用しても変更されません

分類Dev

ローカルディレクトリからファイルを読み取り、HTMLテーブルの行の色を変更します

分類Dev

Javascriptは、ユーザーが指定した行と列でテーブルを作成し、クリック時に各セルの色を変更します

分類Dev

JafaFXListViewは単一のセル/アイテム/行の色を変更します

分類Dev

AJAXからプルされたテーブルのセルの色を自動的に変更します

分類Dev

WPF-テキストブロック行全体の色を変更します

分類Dev

Googleスクリプトのすべてのテーブルの色を変更します

分類Dev

javascriptを使用してhtmlテーブルの列の色を変更する方法

分類Dev

MySQL:テーブルの各行について、別のテーブルの1つの行を変更します

分類Dev

履歴テーブルで変更の最初の行を検索します

分類Dev

aspおよびC#の値に応じてテーブルセルの色を変更します

分類Dev

htmlTableを使用してテーブルヘッダーの色を変更する

分類Dev

HTMLテーブルを解析し、すべての「i」値を変更します<td>色

分類Dev

送信されたフォームの値に応じてテーブルの色を変更します

Related 関連記事

  1. 1

    jQuery:テーブルの行の色を変更しますか?

  2. 2

    javafxテーブルの行は色を変更しません

  3. 3

    データテーブルはrowcallbackで行の色を変更します

  4. 4

    jQueryを使用してテーブルの行の色を変更する方法

  5. 5

    C#は、マウスをホバーするとテーブルの行の色を変更します

  6. 6

    TypeScriptを介してAngularMaterial拡張テーブルの行を展開します

  7. 7

    Bootstrapストライプテーブルの単一行の色を変更します

  8. 8

    jQueryでJavascriptで作成したテーブルの色を変更しますか?

  9. 9

    しきい値に応じてテーブルの色を変更します

  10. 10

    行をホバーしながらprimefacesデータテーブルの行の色を変更する方法

  11. 11

    2行ごとにテーブルの行の色を変更する

  12. 12

    ホバー時にテーブルの行の色を変更する方法

  13. 13

    cssセレクターでテーブルの行の色を変更する

  14. 14

    テーブルの値に基づいて行の色を変更する

  15. 15

    ブートストラップ4ベータテーブルの行の境界線の色を変更しますか?

  16. 16

    AngularMaterialの色はカスタムテーマを使用しても変更されません

  17. 17

    ローカルディレクトリからファイルを読み取り、HTMLテーブルの行の色を変更します

  18. 18

    Javascriptは、ユーザーが指定した行と列でテーブルを作成し、クリック時に各セルの色を変更します

  19. 19

    JafaFXListViewは単一のセル/アイテム/行の色を変更します

  20. 20

    AJAXからプルされたテーブルのセルの色を自動的に変更します

  21. 21

    WPF-テキストブロック行全体の色を変更します

  22. 22

    Googleスクリプトのすべてのテーブルの色を変更します

  23. 23

    javascriptを使用してhtmlテーブルの列の色を変更する方法

  24. 24

    MySQL:テーブルの各行について、別のテーブルの1つの行を変更します

  25. 25

    履歴テーブルで変更の最初の行を検索します

  26. 26

    aspおよびC#の値に応じてテーブルセルの色を変更します

  27. 27

    htmlTableを使用してテーブルヘッダーの色を変更する

  28. 28

    HTMLテーブルを解析し、すべての「i」値を変更します<td>色

  29. 29

    送信されたフォームの値に応じてテーブルの色を変更します

ホットタグ

アーカイブ