Suppléant ligne couleurs angulaire de la table de matériaux

Je me demande comment je cible le pair/impair de lignes à l'intérieur d'un Angular Material Table afin que je puisse régler le pair/impair lignes d'une autre couleur d'arrière-plan.

- Je configurer mon ClaimFileHistoryDataSource classe:

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

Sur NgInit je fais un appel à mes services pour aller chercher les données dont j'ai besoin et remplir le DataSource:

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

C'est très bien et les Données est de retour comme il se doit.

Dans le code HTML de la Mat-Table ressemble à ceci:

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

Encore, je me demandais comment puis-je obtenir le pair/Impair de lignes de la table, et d'une ligne différente de la couleur de fond?

OriginalL'auteur Ben Clarke | 2017-11-01

  1. 60

    Utiliser CSS Suivant dans votre .ou css .scss fichier pour définir le style différent pour les paires/impaires ligne:

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

   .mat-row:nth-child(odd){
          background-color:black;
          }
    Merci pour la réponse. Cela fonctionne parfaitement.
    J'ai fait comme vous avez dit ci-dessus et pour moi ne fonctionne pas
    préfixe avec un point: .mat-ligne:nth-child () { background-color:red; } .mat-ligne:nth-child(odd){ background-color:black; }

    OriginalL'auteur mohit uprim

  2. 11

    La mise à jour de cette réponse avec une nouvelle approche pour les futurs développeurs qui peut venir à cette question.

    Matériel Angulaire offre maintenant des variables à la ligne d'index.

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

    Dans vous fichier CSS: .gray { background-color: #f5f5f5 }

    Il y a d'autres propriétés comme la: index, count, first, last, even et odd.

    Vous pouvez en savoir plus sur Angulaire Docs, plus précisément dans la section "Tableau montrant chaque ligne propriétés de contexte"

    OriginalL'auteur Gustavo Lopes

  3. 0

    Vous pouvez appliquer des couleurs aux lignes en fonction de la condition.

    Pour un exemple, si la valeur de la cellule est égale à 100,puis de modifier la couleur de la ligne rouge.

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

    Scénario ci-dessus ne fonctionnera que si votre colonnes ont macolonne comme l'une des colonnes.
    Aussi en utilisant la même propriété, vous pouvez appliquer la couleur de votre style [ngClass]="{rowcolor: even}

    OriginalL'auteur Hameed Syed