web-dev-qa-db-fra.com

Table de matériau angulaire à couleurs alternées

Je me demande comment je cible les lignes paires/impaires à l'intérieur d'un Angular Material Table afin de pouvoir définir une couleur d'arrière-plan différente pour les lignes paires/impaires.

J'ai configuré ma classe 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() {}
}

Sur NgInit, je fais un appel à mon service pour obtenir les données dont j'ai besoin et renseigner la DataSource:

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

C'est bien et les données reviennent comme il se doit.

Dans le code HTML, le 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 une fois, je me demandais comment faire pour obtenir les lignes impaires/paires du tableau et leur attribuer une couleur d'arrière-plan différente.

htmlcssangularangular-material2
18
Ben Clarke

Utilisez CSS suivant dans votre fichier .css ou .scss pour définir un style différent pour la ligne paire/impair:

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

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

Mise à jour de cette réponse avec une approche plus récente pour les futurs développeurs qui pourraient venir à cette question.

Material Angular propose désormais des variables pour les index de lignes.

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

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

Il existe d'autres propriétés telles que: index, count, first, last, even et odd.

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

7
Gustavo Lopes

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

Par exemple, si la valeur de la cellule est égale à 100, modifiez la couleur de la ligne en 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;
}

Le scénario ci-dessus fonctionnera si l'une des colonnes de votre colonne est myColumn . En utilisant également la propriété even, vous pouvez appliquer le style de couleur requis [ngClass]="{rowcolor: even}

0
Hameed Syed