Table de matières angulaire 4 surligner une rangée

Dans le tableau vue d'ensemble des exemples page ils expliquent l' SelectionModel pour la manipulation des sélections - qui, par ailleurs, poignées multi-sélection. J'imagine qu'à l'avenir, c'est ce qui sera incorporé dans les améliorations futures, donc c'est une bonne idée de commencer à l'utiliser maintenant.

selection est un modèle de sélection défini dans votre composant. Je n'ai pas pu trouver de documentation pour cela, mais le mise en oeuvre est extrêmement simple.

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

Le premier paramètre est allowMultiSelect, donc pour permettre à plusieurs items d'être sélectionnés à la fois, définissez-le à true. Quand false le modèle de sélection désélectionnera toutes les valeurs existantes quand vous définirez une nouvelle valeur.

puis Ajouter un événement de clic à select() la rangée et créer votre propre classe css pour quand la rangée 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'échantillon ne mentionne pas encore le style) et ensuite vous avez juste besoin d'ajouter à votre css

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

   &.selected {
       background: #dddddd;
   }
}

si votre couleur de fond est trop sombre, vous aurez besoin d'ajouter des styles vous-même pour inverser la couleur du texte.

Pour gérer la sélection d'utiliser onChange événement 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 mat-table est améliorée pour les cas courants comme celui-ci et ils ne laissent pas tout au développeur. Des choses comme des événements de clavier, etc. serait agréable d'être manipulé automatiquement par rapport au modèle de sélection.

astuce: notez que si vous créez votre SelectionModel pour une collection Non multi-select avec

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

selection.selected.length va effectivement être à 1 et non 0 articles. Il n'y a pas de vérification pour voir que l'article passé est en fait dans le modèle - c'est une classe très très stupide. Donc aveuglément met [0] comme l'élément sélectionné. Utilisez null à la place. Le code source explique clairement pourquoi cela se produit :

if (_isMulti) {
    initiallySelectedValues.forEach(value => this._markSelected(value));
  } else {
    this._markSelected(initiallySelectedValues[0]);
  }

donc, j'ai rencontré ce problème aussi. J'utilise le nouveau 'mat -' au lieu de' md -', mais je suppose que ce sera à 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é cela nulle part, je l'ai juste essayé et il se trouve que ça a fonctionné, donc j'espère que c'est vrai. Le plus important était de marquer "let entry" à la fin des autres trucs matRowDef. Désolé, je suis tellement en retard à la fête. J'espère que ce n'est quelqu'un de bien.

Je n'avais pas d'identificateurs uniques comme la colonne id dans mes données de tableau 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>

ajouter variable à TS

selectedRow;

(S)CSS

.selected {
  background-color: red;
}

si vous voulez faire plus de choses que simplement styliser en sélectionnant une ligne, remplacez (click)="selectedRow = row"(click)="selectRow(row)" et ajoutez cette fonction à votre ts:

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