web-dev-qa-db-ger.com

Abwechselnde Zeilenfarben-Materialtabelle

Ich frage mich, wie ich die geraden/ungeraden Zeilen in einem Angular Material Table anvisiere, damit ich den geraden/ungeraden Zeilen eine andere Hintergrundfarbe zuweisen kann.

Ich habe meine ClaimFileHistoryDataSource-Klasse eingerichtet:

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

Bei NgInit rufe ich meinen Dienst an, um die benötigten Daten abzurufen und die DataSource aufzufüllen:

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

Dies ist in Ordnung und die Daten kommen wieder wie vorgesehen.

Im HTML-Code sieht der Mat-Table folgendermaßen aus:

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

Wieder fragte ich mich, wie ich die ungeraden/geraden Zeilen der Tabelle abrufen und ihnen eine andere Zeilenhintergrundfarbe zuweisen kann.

18
Ben Clarke

Verwenden Sie Folgendes CSS in Ihrer .css- oder .scss-Datei, um den Stil für gerade/ungerade Zeilen festzulegen:

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

   .mat-row:nth-child(odd){
          background-color:black;
          }
54
mohit uprim

Aktualisierung dieser Antwort mit einem neueren Ansatz für zukünftige Entwickler, die möglicherweise zu dieser Frage kommen.

Material Angular bietet jetzt einige Variablen für Zeilenindizes.

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

In Ihrer CSS-Datei: .gray { background-color: #f5f5f5 }

Es gibt andere Eigenschaften wie: index, count, first, last, even und odd.

Weitere Informationen finden Sie unter Angular Docs , genauer im Abschnitt "Tabelle, die die Eigenschaften jedes Zeilenkontexts zeigt".

7
Gustavo Lopes

Sie können Farben auch je nach Bedingung auf Zeilen anwenden.

Wenn der Zellenwert 100 beträgt, ändern Sie die Farbe der Zeile in rot.

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

Das obige Szenario funktioniert, wenn Ihre Spalten myColumn als eine der Spalten enthalten .. __ Wenn Sie die even -Eigenschaft verwenden, können Sie den erforderlichen Farbstil anwenden [ngClass]="{rowcolor: even}.

0
Hameed Syed