en ajoutant conditionnellement la classe css en utilisant renderer dans md-table md-row ne fonctionne pas

Question

J'essaye d'ajouter la classe css dans md-row de md-table en utilisant Renderer mais il n'a jamais été appliqué.

Voici mon code.

constructor(private renderer: Renderer) { } 
 

 
onContextMenuClick(e: Event){ 
 
\t // do something... 
 
\t // add css class based on condition 
 
\t this.renderer.setElementClass(e.currentTarget, 'selected', true); 
 
    
 
    
 
} 
 

 
<md-row *cdkRowDef="let row; columns: displayedColumns;" 
 
\t [ngClass]="uniqueRow(row.id)" // To update/remove row by the unique Id 
 
     (contextmenu)="onContextMenuClick($event,row.id)" // Do something on contextmenu click 
 
     [class.checkbox-selected]="selection.isSelected(row.id)"> // add selected css class on check box checked. 
 
</md-row>

Answer 1

Il était détecteur de changement angulaire. J'ai ajouté la fonction remove class à l'intérieur de la fonction de sélection de case à cocher pour nettoyer les classes css précédentes tout en vérifiant, mais angular détecte les changements et déclenche cette fonction à chaque changement donc si j'ajoute css class quand context click, il applique une fois sur événement de clic de contexte, mais il est ensuite retiré de la fonction checkbox lorsque le changement de détection angulaire.

dans la fonction de case à cocher J'ai ajouté cette ligne

$('md-row').removeClass('selected')

dans la vue

<md-checkbox color="primary" 
       (click)="$event.stopPropagation()" 
       (change)="$event ? selection.toggle(row.id) : null" 
       [checked]="selection.isSelected(row.id)"> 
</md-checkbox> 

La classe remove a tiré chaque fois du détecteur de changement angulaire fonctionne, Donc, ma classe d'ajout après le clic contextuel est appliquée à la fois en enlevé. J'ai enlevé cette ligne $('md-row').removeClass('selected') et refactorisé avec ceci:

this.selection.onChange.takeUntil(this.unsubscribe$).subscribe(d => { 
     if (this.selection.selected.length > 0) { 
      // clean onContext css classes. 
      let elems = document.getElementsByTagName('md-row'); 
      for (let i = 0, len = elems.length; i < len; i++) { 
       let classes = elems[i].classList; 
       if (classes.contains('selected')) 
        classes.remove('selected'); 
     } 
    } 
});