单击时如何仅更改离子列表中的一种离子项颜色？

Question

我尝试了多种方法，但我似乎无法弄清楚这一点。 我有一个 ion-list，其中包含多个 ion-items，我在 *ngFor 的帮助下从一个数组中获得。当我点击一个项目时，我只想改变它的颜色。当我单击其中一个时，我设法更改了所有离子项目的颜色，但 这不是我想要的。

这是一个代码sn-p：

      <ion-col>
         <ion-item *ngFor="let exercise of exercisesArray" (click)="onClick(exercise)"  [ngStyle]="{color: color}"> 
          {{exercise.title}}
        </ion-item>
      </ion-col>
    </ion-list>

如您所见，我尝试在单击函数 onClick(exercise) 时更改颜色变量。我需要将练习作为其他目的的参数。无论如何，这行得通，但是 exerciseArray 中的所有项目都得到了那种颜色。 但正如我所说，我只想更改已点击项目的颜色。

提前感谢您的帮助！

Answer 1

获取一个变量并检查您的*ngForif 项目的索引更改颜色。

.ts

selectedItem: any;

.html

<ion-item *ngFor="let exercise of exercisesArray; let i = index" (click)="onClick(exercise); selectedItem = i"  [ngStyle]="{color: selectedItem == i ? YourNewColor : null}">
{{exercise.title}}
</ion-item>

在单击项目时更新您的 selectedItem 变量，并在您的 ngStyle 中检查它以应用新颜色。

Answer 2

为此，请像这样创建exercisesArray -

exercisesArray = [
    {
      title: "A",
      color: "green"
    },
    {
      title: "B",
      color: "green"
    },
    {
      title: "C",
      color: "green"
    }
  ];

在 onclick 函数中，发送已点击数组的 id，并根据该 id 更改该对象的颜色。例如，

this.exercisesArray[index].color = 'red';

如需进一步参考，请查看this