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作为列之一，则上述方案将起作用。还可以使用偶数属性来应用所需的颜色样式[ngClass]="{rowcolor: even}

Answer 4

如果使用主题，则透明 CSS看起来不错：

.mat-row:nth-child(odd){
  background: rgba(0,0,0,0.025);
}

Answer 5

不幸的是，以上答案对我都不起作用（我正在使用multiTemplateDataRows），但是在对Gustavo Lopez答案进行了调整之后，我得到了如下效果：

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

css是以前的答案：

.alternate { background-color: #f5f5f5 }

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

Answer 6

@mohit uprim和@Gustavo Lopes的答案确实为我创建了Material Angular数据表。但是，只要我将鼠标悬停在该行上方，该行就会获得其初始默认颜色（白色），并在发生鼠标移出事件时恢复新的CSS颜色。因此，添加“重要”标志应该可以解决此问题：

.some-class-name {
    background-color: blue !important; 
}

替代行颜色角度材质表

6 个答案: