Реализация кнопок для цикла, доступ к каждой кнопке индивидуально

Question

Я реализую цикл for для кнопок, и при нажатии должен измениться цвет соответствующей кнопки.

Но в моем случае, если я нажимаю на кнопку, цвет каждой кнопки меняется.

Answer 1

Полагаю, у вас должен быть какой-то массив с такими элементами

colorArray = [
    {color: "red"},
    {color: "red"},
    {color: "red"},
    {color: "red"},
    {color: "red"}
  ]

Чтобы повторить. так что вы можете изменить цвет при нажатии на конкретную кнопку, как это

<div *ngFor = "let color of colorArray" >
        <div class = "col-md-3">
        <input type="button" (click)="changeColor(color)" value ="Delete" [style.background]='color?.color || "blue"' />
        </div>
   </div>

changeColor(clr) {
    clr.color = "blue";
  }

Рабочий пример