交替行颜色角材料表答案

【问题标题】：Alternate row colours angular material table交替行颜色角材料表
【发布时间】：2018-04-13 13:21:46
【问题描述】：

我想知道如何定位 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>

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

【问题讨论】：

标签： html css angular angular-material2

【解决方案1】：

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

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

【讨论】：

【解决方案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 上找到更多信息，更具体地说，请参见“显示每行上下文属性的表格”部分

【讨论】：

如果您使用可扩展的详细信息行，这是更好的选择，否则颜色会消失
新手问题：为什么需要let even = even 而不需要'let row = row`？

【解决方案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}

【讨论】：

【解决方案4】：

如果您使用主题，透明 css 看起来不错：

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

【讨论】：

【解决方案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) 解决了索引属性。希望这会帮助其他拥有可扩展行的人。

【讨论】：

谢谢，这个解决方案在使用可扩展行时效果很好
谢谢，它非常适合我的问题。

【解决方案6】：

@mohit uprim 和 @Gustavo Lopes 的答案对我来说确实适用于 Material Angular 数据表。但是每当我将鼠标悬停在该行上方时，该行都会获得其初始默认颜色（白色）并在鼠标移出事件时恢复新的 CSS 颜色。因此，添加“重要”标志应该可以解决它：

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

【讨论】：