我想知道如何將有角度的材質(zhì)表中的偶數(shù)/奇數(shù)行作為目標，以便我可以將偶數(shù)/奇數(shù)行設置為不同的背景顏色。

我設置了我的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上，我調(diào)用我的服務來獲取我需要的數(shù)據(jù)并填充數(shù)據(jù)源:

this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
  this.claimClientInformation = response;       
  this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});

這很好，數(shù)據(jù)正在按預期恢復。

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

我又一次想知道如何獲得表的奇數(shù)/偶數(shù)行，并為它們設置不同的行背景顏色？

在你的。css或者。為偶數(shù)/奇數(shù)行設置不同樣式的scss文件:

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

用一種更新的方法更新這個答案，給將來可能會遇到這個問題的開發(fā)人員。

材料角度現(xiàn)在為行索引提供了一些變量。

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

在你的CSS文件中:?；疑珄背景色:#f5f5f5 }

還有其他屬性，如:指數(shù)，計數(shù)，第一，最后，偶數(shù)和奇數(shù)。

您可以在Angular文檔中找到更多信息，尤其是在“顯示每行上下文屬性的表格”一節(jié)中

您也可以根據(jù)條件對行應用顏色。

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

鋼性鑄鐵

.rowStyle{
background-color:red;
font-weight: bold;
}

如果您的列將myColumn作為其中一列，上述場景將會工作。 還可以使用even屬性應用所需的顏色樣式[ngClass]="{rowcolor: even}

如果你使用主題，透明的css看起來不錯:

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

不幸的是，上面的答案都不適合我(我使用的是multiTemplateDataRows)，但是在調(diào)整了Gustavo Lopez的答案后，我得到了如下的答案:

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

css和之前的答案一樣:

.alternate { background-color: #f5f5f5 }

當您有多個模板數(shù)據(jù)行時，似乎沒有像奇數(shù)、偶數(shù)或索引這樣的屬性起作用，但幸運的是，他們已經(jīng)用dataIndex解決了索引屬性(https://github.com/angular/組件/問題/12793 #問題注釋-415356860)。希望這將有助于擁有可擴展行的其他人。

@mohit uprim和@Gustavo Lopes的答案對我來說確實適用于材料角度數(shù)據(jù)表。但是每當我將鼠標懸停在該行上方時，該行將獲得其初始默認顏色(白色),并在鼠標離開事件時恢復新的CSS顏色。所以，加上& quot重要& quotflag應該可以修復它:

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

對于角形材料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 */
}