交替行颜色角材料表

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

如果你使用主题，透明 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）。希望这能帮助其他拥有可扩展行的人。

Answer 6

带角材料16

.mat-mdc-row:nth-child(even) {
  background-color: #f1f1f1; /* Set the background color for even rows */
}

.mat-mdc-row:nth-child(odd) {
  background-color: #ffffff; /* Set the background color for odd rows */
}

Answer 7

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

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

Answer 8

永远记得在浏览器中检查模板样式，如果属性被划掉，请添加'!important'