Alternate row Farben eckig material Tabelle

Frage ich mich, wie ich Ziel-die geraden/ungeraden Zeilen innerhalb einer Angular Material Table so, dass ich einstellen kann das gerade/ungerade Zeilen eine andere Hintergrundfarbe.

Richte ich meine ClaimFileHistoryDataSource Klasse:

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

Auf NgInit ich einen Anruf auf meinen Dienst zu gehen und sich die Informationen, die ich brauche, und füllen Sie die DataSource:

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

Dieser in Ordnung ist und die Daten kommen zurück, als es sollte.

In den HTML-Code des Mat-Table sieht wie folgt 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 wurde ich gefragt, wie bekomme ich die gerade/Ungerade Zeilen der Tabelle und setzen Sie auf eine andere Zeile Hintergrundfarbe?

InformationsquelleAutor Ben Clarke | 2017-11-01

  1. 57

    Verwenden Sie Folgendes CSS in Ihre .css-oder .scss-Datei, um die verschiedenen Stil für gerade/ungerade Zeile:

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

   .mat-row:nth-child(odd){
          background-color:black;
          }
    Danke für die Antwort. Das klappt perfekt.
    Ich habe wie du oben gesagt und für mich hat nicht funktioniert
    Präfix mit einem Punkt: .mat-row:nth-child(even){ background-color:red; } .mat-row:nth-child(odd){ background-color:black; }

    InformationsquelleAutor mohit uprim

  2. 9

    Aktualisierung dieser Antwort mit einem neueren Ansatz, um zukünftige Entwickler, die vielleicht kommen auf diese Frage.

    Material Winkel bietet nun einige Variablen Zeilen-Indizes.

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

    In der Sie die CSS-Datei: .gray { background-color: #f5f5f5 }

    Gibt es andere Eigenschaften wie: index, count, first, last, even und odd.

    Erfahren Sie mehr auf Winkel-Docs, genauer auf den Abschnitt "Tabelle mit jeder Zeile Kontext Eigenschaften"

    InformationsquelleAutor Gustavo Lopes

  3. 0

    Können Sie die Farben anwenden, um Zeilen basierend auf den Zustand als gut.

    Für eine Instanz, wenn der Wert der Zelle ist gleich 100,dann ändern Sie die Farbe der Zeile zu 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;
}

    Oben beschriebene Szenario funktionieren wird, wenn Ihre Spalten myColumn als eine der Spalten.
    Auch mit selbst-Eigenschaft können Sie die gewünschte Farbe styling [ngClass]="{rowcolor: even}

    InformationsquelleAutor Hameed Syed

Schreibe einen Kommentar