Comment ajouter une bordure gauche sur un clic de ligne dans mdtable angular material2

Question

J'utilise angular material2 dans mon projet. J'ai utilisé le composant table. Je veux ajouter la bordure gauche à la ligne cliquée en cours seulement de la table.

Il y a des sélecteurs volants et actifs que je peux utiliser. Mais le sélecteur actif garde la frontière seulement si la ligne est active, c'est-à-dire seulement l'heure pendant laquelle la souris est dans l'état cliqué. Mais je veux l'ajouter même si l'utilisateur relâche la souris. Comment puis-je y parvenir?

Answer 1

<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> permet d'ajouter class et event à la ligne entière.

J'ai ajouté un ngClass dedans pour montrer highlight classer quand row.id correspond au selectedRowIndex. En outre, ajouté un événement click pour transmettre les informations de ligne au composant pour définir le selectedRowIndex.

Html:

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

composant:

selectedRowIndex: number = -1 

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

css:

.highlight{ 
    border-left: 5px solid #42A948; /* green */ 
} 

Plunker demo