web-dev-qa-db-fra.com

Angular 4 Le tableau des matières met en surbrillance une ligne

Je cherche un bon moyen de mettre en valeur toute une ligne dans md-table.
Devrais-je faire une directive ou quoi?
Tout le monde peut m'aider avec ça?

<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 from: https://material.angular.io/components/table/overview

angularangular-material2
42
Taison Morris

Mise à jour pour une version plus récente du matériau (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 ligne cliqué est égal à selectedRowIndex, la classe est appliquée.

démo de 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: number = -1;

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

Dans la page exemples de présentation du tablea , ils expliquent la SelectionModel pour la gestion des sélections - qui gère également la multi-sélection.

selection est un SelectionModel défini dans votre composant. Je n'ai trouvé aucune documentation à ce sujet, mais la implémentation est extrêmement simple.

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

Le premier paramètre est allowMultiSelect, afin de permettre à plusieurs éléments d'être sélectionnés à la fois, définissez-le sur true. Lorsque la valeur est false, le modèle de sélection désélectionne les valeurs existantes lorsque vous définissez une nouvelle valeur.

Ajoutez ensuite un événement de clic à select() la ligne et créez votre propre classe CSS pour la sélection de la ligne.

   <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 votre couleur d'arrière-plan est trop sombre, vous devrez ajouter des styles vous-même pour inverser la couleur du texte.

Pour gérer la sélection, utilisez l'événement onChange 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 bien les éléments sélectionnés sont en this.selection.selected.

J'espère que mat-table sera amélioré pour les cas courants comme celui-ci et qu'ils ne laisseront pas tout cela au développeur. Des événements tels que des événements au clavier, etc. seraient agréables à gérer automatiquement par rapport au modèle de sélection.

27
Simon_Weaver

Je n'avais pas d'identifiant unique comme la colonne id dans mes données de table, mais cela fonctionnait pour moi (matériel 6):

HTML

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

ajouter une variable à TS

selectedRow;

(S) CSS

.selected {
  background-color: red;
}

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

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

J'ai donc rencontré ce problème également. J'utilise le plus récent 'mat-' au lieu de 'md-', mais je suppose qu'il sera à peu près le même….

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

Je n'ai trouvé ça nulle part, j'ai juste essayé et tout s'est bien passé, alors j'espère que c'est vrai. Le gros problème était de laisser "let entry" à la fin de l'autre matRowDef. Désolé je suis si tard pour la fête. J'espère que cela fait du bien à quelqu'un.

3
Nick Landkamer

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

utilisez le nom CSS en HTML, sans la citation simple, pour mettre en surbrillance 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;
}
2
Priya