2
votes

angulaire - changer la couleur de l'icône lorsque vous cliquez dessus

J'ai actuellement un tableau qui affiche la liste des éléments. Chaque élément a une icône à côté. Ce que je voudrais faire est de cliquer sur leur icône et cela changera de couleur. À l'heure actuelle, lorsque je clique sur l'une des icônes, la couleur de la première icône est modifiée uniquement.

<table class="table table-borderless" style="background-color: #CCE4E9">
    <tbody>
        <tr *ngFor="let content of acts">
            <td style="font-size: 14px;" *ngIf="content.status == 2;">{{content.description}}
            </td>
            <td>
                <button id="addToSummary" class="mdc-icon-button material-icons" style="color: #FFFFFF;"
                    (click)="addToSummary()">grade</button>
            </td>
        </tr>
    </tbody>
</table>

addToSummary(){
  document.getElementById("addToSummary").style.color = "#3DA2DA";

}

Que dois-je faire pour en changer un seul?

typescript material-design angular

1 commentaires

Dans le ng pour tous vos identifiants de bouton sont identiques

3 Réponses :

3
votes

Votre solution actuelle ne fonctionne pas car getElementById ne renvoie qu'un seul élément (le premier trouvé) avec l'ID donné. En plus de cela, effectuer de telles requêtes DOM n'est certainement pas la méthode angulaire.

Au lieu de cela, vous devrez changer la définition de votre bouton en quelque chose comme ceci:

addToSummary(content){
    content.isSelected = true;
}

Et nous changeons également notre addToSummary pour ressembler à ceci:

<button class="mdc-icon-button material-icons" [style.color]="content.isSelected ? '#3DA2DA' : 'FFFFFF'" (click)="addToSummary(content)">grade</button>

L'idée de base est donc la suivante:

Chaque élément de votre tableau actes possède une propriété isSelected
Si cette propriété est définie sur true, l'étoile est de couleur bleue
Dans la méthode addToSummary , nous définissons la propriété isSelected sur true
Nous traitons cela de manière angulaire en utilisant [style.color] qui nous permet de définir une expression simple pour basculer entre la couleur blanche et bleue.

2 commentaires

Merci d'avoir répondu. cela a parfaitement fonctionné. Une autre question, y a-t-il un moyen de le «désélectionner»? ce qui signifie que la couleur de l'icône revient à la couleur précédente.

Dans votre méthode addToSummary , faites simplement: content.isSelected =! Content.isSelected . Cela inversera la valeur booléenne de vrai à faux et vice versa.

0
votes

Vous pouvez également essayer de cette manière

 <table class="table table-borderless" style="background-color: #CCE4E9">
   <tbody>
        <tr *ngFor="let content of acts; let i = index;">
           <td style="font-size: 14px;" *ngIf="content.status == 2;"> 
              {{content.description}}
           </td>
           <td>
               <button id="addToSummary" [ngClass]="['addToSummary', i]" class="mdc-icon-button material-icons" style="color: #FFFFFF;"
                (click)="addToSummary(i)">grade</button>
           </td>
        </tr>
  </tbody>
</table>

addToSummary(i){
     let className = "addToSummary " + i;
     document.getElementByClassName(className).style.color = "#3DA2DA";
}

1 commentaires

Personnellement, je déconseillerais toute utilisation des méthodes document.getElementBy ... dans Angular. Angular est parfaitement capable de traiter la question d'OP sans utiliser ces méthodes.

0
votes

Le moteur de rendu peut être utilisé pour manipuler le DOM

import { ElementRef, Renderer2} from '@angular/core';

constructor(private elRef: ElementRef, private renderer: Renderer2) { }

addToSummary() {
    let elm = this.elRef.nativeElement.querySelector('#addToSummary');
    this.renderer.setStyle(elm, 'color', '#3DA2DA');
}

1 commentaires

Veuillez ne pas faire ça. L'utilisation de sélecteurs de requête devrait vraiment être un dernier effort lorsque vous travaillez avec Angular. La question d'OP est un problème classique qu'Angular peut résoudre sans avoir besoin de sélecteurs de requête.