web-dev-qa-db-ja.com

代替行の色angularマテリアルテーブル

偶数/奇数行に異なる背景色を設定できるように、Angular Material Table内の偶数/奇数行をどのようにターゲットにするか疑問に思っています。

ClaimFileHistoryDataSourceクラスを設定します：

claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];


export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {

    constructor(private _claimFileHistory: ClaimFileHistory[]) {
      super();
    }

    connect(): Observable<ClaimFileHistory[]> {
      return Observable.of(this._claimFileHistory);
    }

    disconnect() {}
}

NgInitで、サービスを呼び出して必要なデータを取得し、DataSourceを設定します。

this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
  this.claimClientInformation = response;       
  this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});

これは正常であり、データは本来の状態に戻っています。

HTMLでは、Mat-Tableは次のようになります。

    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="TypeImg">
        <mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
      </ng-container>

      <ng-container matColumnDef="Description">
        <mat-cell *matCellDef="let row">
          <div>
            <span class="d-block">{{row.Description}}</span>
            <span class="d-block">{{row.Date}}</span>
          </div>

        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Agent">
        <mat-cell *matCellDef="let row"> {{row.Agent}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

繰り返しますが、テーブルの奇数/偶数行を取得し、それらに異なる行背景色を設定するにはどうすればよいのでしょうか？

htmlcssangularangular-material2
25
Ben Clarke

.cssまたは.scssファイルで次のCSSを使用して、偶数/奇数行に異なるスタイルを設定します。

   .mat-row:nth-child(even){
          background-color:red;
          }

   .mat-row:nth-child(odd){
          background-color:black;
          }
76
mohit uprim

この質問に答える可能性のある将来の開発者に対する新しいアプローチでこの回答を更新します。

Material Angularは、行インデックスにいくつかの変数を提供するようになりました。

<mat-row *matRowDef="
              let row;
              let even = even; 
              columns: displayedColumns;" 
         [ngClass]="{gray: even}"></mat-row>

あなたのCSSファイル：.gray { background-color: #f5f5f5 }

index、count、first、last、even、およびoddなどの他のプロパティがあります。

Angular Docs 、より具体的には「各行コンテキストプロパティを示すテーブル」セクションで詳細を確認できます。

18
Gustavo Lopes

条件に基づいて行に色を適用することもできます。

たとえば、セルの値が100に等しい場合、行の色を赤に変更します。

     <tr class="matheader-row" mat-row *matRowDef="let row; columns: displayColumns; 
      let i = index; let even = even;" [class.rowStyle]="row['myColumn']=='100'"
                [ngClass]="{rowcolor: even}">
        </tr>

css

.rowStyle{
background-color:red;
font-weight: bold;
}

上記のシナリオは、列の1つとしてmyColumnがある場合に機能します。また、偶数プロパティを使用して、必要なカラースタイリング[ngClass]="{rowcolor: even}を適用できます

4
Hameed Syed