Html 交替行颜色角材料表

我想知道如何在

角度材质表中定位偶数/奇数行

，以便将偶数/奇数行设置为不同的背景颜色

我设置了我的

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() {}
}

这很好，数据正在恢复正常

在HTML中，

Mat表

如下所示：

    <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>

{{row.Description}}
{{row.Date}
{{row.Agent}}

---

我又想知道如何获取表中的奇数行/偶数行并将其设置为不同的行背景颜色？

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

.mat行：第n个子行（偶数）{
背景色：红色；
}
.mat行：第n个孩子（奇数）{
背景色：黑色；
}

用更新的方法更新此答案，以供未来可能遇到此问题的开发人员使用

Material Angular现在为行索引提供了一些变量

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

在CSS文件中：

.gray{背景色：#f5}

还有其他属性，如：

索引

，

计数

，

第一个

，

最后一个

，

偶数

和

奇数

---

您可以在“显示每行上下文属性的表”部分了解更多信息。

您也可以根据条件对行应用颜色

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

如果您的列将myColumn作为其中一列，则上述场景将起作用。 另外，使用偶数属性，您可以应用所需的颜色样式

[ngClass]=“{rowcolor:event}

如果您使用透明的css主题，它看起来很漂亮：

.mat行：第n个子行（奇数）{
背景：rgba（0,0,0,0.025）；
}

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

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

---

当您有多模板DataRows时，似乎没有像奇数、偶数或索引这样的属性起作用，但幸运的是，它们已经用dataIndex（）解决了index属性。希望这将有助于其他具有可扩展行的用户。

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

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

---

@带点的pnet前缀：。mat行：第n个子（偶数）{背景色：红色；}。mat行：第n个子（奇数）{背景色：黑色；}如果您使用的是可扩展详细信息行，这是更好的选择，否则颜色会消失谢谢，使用可扩展行时此解决方案非常有效谢谢，它非常适合我的问题。

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

.alternate { background-color: #f5f5f5 }

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