angular - изменение цвета значка при нажатии

Question

У меня в настоящее время есть таблица, которая отображает список предметов. Каждый элемент имеет значок рядом с ним. Что я хотел бы сделать, так это нажать на иконку, и она изменит свой цвет. Прямо сейчас, когда я нажимаю на любой из значков, он изменит только цвет первого значка.

<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";

}

Что мне нужно сделать, чтобы изменить только один из них?

Answer 1

Ваше текущее решение не работает, потому что getElementById возвращает только один (первый найденный) элемент с заданным идентификатором. Кроме того, выполнение таких запросов DOM определенно не является угловым способом.

Вместо этого вам нужно изменить определение кнопки на что-то вроде этого:

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

И мы также изменили наш метод addToSummary, чтобы он выглядел следующим образом:

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

Итак, основная идея такова:

• Каждый элемент в вашем массиве acts имеет свойство isSelected
• Если для этого свойства установлено значение true, звезда окрашивается в синий цвет
• В методе addToSummary мы устанавливаем для свойства isSelected значение true
• Мы обрабатываем этот «угловой путь» с помощью [style.color], который позволяет нам определить простое выражение для переключения между белым и синим цветом.

Answer 2

Renderer может использоваться для управления 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');
}

Answer 3

Вы также можете попробовать вот так

 <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";
}