备用行颜色角材料表

Question

我想知道我如何定位内部的偶数/奇数行,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>

我再次想知道如何获取表格的奇数/偶数行并为它们设置不同的行背景颜色？

Answer 1

在.css或.scss文件中使用以下CSS来设置偶数/奇数行的不同样式:

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

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

Answer 2

使用更新的方法更新此答案,以解决可能遇到此问题的未来开发人员.

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上找到更多信息,更具体地说,请参阅"显示每个行上下文属性的表"部分.

Answer 3

您也可以根据条件将颜色应用于行。

例如，如果单元格值等于 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;
}

如果您的列将 myColumn 作为列之一，则上述方案将起作用。同样使用 even 属性，您可以应用所需的颜色样式[ngClass]="{rowcolor: even}

Answer 4

不幸的是，上述答案都不适合我（我正在使用 multiTemplateDataRows），但在调整 Gustavo Lopez 答案后，我让它按如下方式工作：

\n

<tr *matRowDef="\n          let row;\n          let index = dataIndex;\n          columns: displayedColumns;" \n     [ngClass]="{alternate: index % 2 == 0 }"></tr>\xc2\xb4\n

\n

css如之前的答案：

\n

.alternate { background-color: #f5f5f5 }\n

\n

当您有 multiTemplateDataRows 时，似乎奇数、偶数或索引等属性都不起作用，但幸运的是，他们已经使用 dataIndex 解决了索引属性（https://github.com/angular/components/issues/12793#issuecomment-415356860）。希望这会对其他拥有可扩展行的人有所帮助。

\n