Angular 4 Material table met en évidence une ligne

Question

Je cherche un bon moyen de mettre en évidence l'ensemble d'une rangée dans md-table .
Je dois faire une directive ou quoi ?

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="color">
      <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
      <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
</div>

Table de : https://material.angular.io/components/table/overview

Answer 1

Mise à jour pour une version plus récente du matériel (md --> mat) :

html :

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<mat-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</mat-row>

Réponse originale :

Vous pouvez le faire en utilisant ngClass et un drapeau comme selectedRowIndex . Chaque fois que l'index de la ligne cliquée est égal à selectedRowIndex la classe sera appliquée.

Démonstration Plunker

html :

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</md-row>

css :

.highlight{
  background: #42A948; /* green */
}

ts :

selectedRowIndex = -1;

highlight(row){
    this.selectedRowIndex = row.id;
}

Answer 2

Dans le aperçu des tableaux exemples page, ils expliquent le SelectionModel pour gérer les sélections - qui, incidemment, gère également la multi-sélection.

selection est un SelectionModel défini dans votre composant. Je n'ai pas pu trouver de documentation réelle à ce sujet, mais l'option mise en œuvre est extrêmement simple.

selection = new SelectionModel<CustomerSearchResult>(false, null);

Le premier paramètre est allowMultiSelect Pour permettre la sélection de plusieurs éléments à la fois, mettez-le à true. Lorsque cette valeur est fausse, le modèle de sélection désélectionne toutes les valeurs existantes lorsque vous définissez une nouvelle valeur.

Ensuite, ajoutez un événement de clic à select() la ligne et créez votre propre classe css pour le moment où la ligne est sélectionnée.

   <mat-table>
        ...

        <mat-row *matRowDef="let row; columns: displayedColumns;"
                 [ngClass]="{ 'selected': selection.isSelected(row)}"
                 (click)="selection.select(row)"></mat-row>

    </mat-table>

La classe css que j'ai ajoutée est ci-dessous (l'exemple ne mentionne pas encore le style) et il vous suffit ensuite d'ajouter à votre css

.mat-row {
   min-height: 65px;

   &.selected {
       background: #dddddd;
   }
}

Si la couleur de votre arrière-plan est trop sombre, vous devrez ajouter vous-même des styles pour inverser la couleur du texte.

Pour gérer la sélection, utilisez la fonction onChange événement de selection .

    // selection changed
    this.selection.onChange.subscribe((a) =>
    {
        if (a.added[0])   // will be undefined if no selection
        {
            alert('You selected ' + a.added[0].fullName);
        }
    });

Ou encore, les éléments sélectionnés sont dans this.selection.selected .

J'espère mat-table est amélioré pour les cas courants comme celui-ci et ne laisse pas tout à la charge du développeur. Des choses comme les événements clavier, etc., seraient bien d'être gérées automatiquement par rapport au modèle de sélection.

Answer 3

Je n'avais pas d'identifiants uniques comme la colonne id dans mes données de table mais cela a fonctionné pour moi (matériel 6) :

HTML

 <tr mat-row *matRowDef="let row; columns: displayedColumns" 
     (click)="selectedRow = row" [ngClass]="{ 'selected': row === selectedRow }"> 
 </tr>

ou HTML si vous voulez permettre aux utilisateurs de désélectionner lors d'un autre clic.

 <tr mat-row *matRowDef="let row; columns: displayedColumns" 
     (click)="selectedRow = selectedRow === row ? null : row" [ngClass]="{ 'selected': row === selectedRow }"> 
 </tr>

ajouter une variable au TS

selectedRow;

(S)CSS

.selected {
  background-color: red;
}

Si vous voulez faire autre chose que du stylisme lors de la sélection d'une ligne, remplacez (click)="selectedRow = row" avec (click)="selectRow(row)" et ajoutez cette fonction à votre ts :

selectRow(row) {
    this.selectedRow = row;
    // more stuff to do...
}

Answer 4

J'ai également rencontré ce problème. J'utilise le nouveau 'mat-' au lieu de 'md-', mais je suppose que c'est à peu près la même chose...

<mat-row
    *matRowDef="let row; columns: myColumns; let entry"
    [ngClass]="{ 'my-class': entry.someVal }">
</mat-row>

Je n'ai trouvé ça nulle part, je l'ai juste essayé et ça a marché, donc j'espère que c'est vrai. Le gros problème était de marquer "let entry" à la fin des autres éléments de matRowDef. Désolé d'être arrivé si tard à la fête. J'espère que cela fera du bien à quelqu'un.

Answer 5

Pour le matériel" : "^7.0.3",

utiliser le nom css en html, sans guillemet simple, pour mettre en évidence la ligne

 .mat-row.highlighted {
  background: lightblue;
  }

<tr mat-row *matRowDef="let row; columns: displayedColumn;" 
[ngClass]="{highlighted: selectedRowIndex == row.id}"  (click)="highlight(row)" > 
</tr>

highlight(row){
this.selectedRowIndex = row.id;
}