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

Question

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

这是一个代码片段：

      <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) 时更改颜色变量。 我需要将练习作为其他目的的参数。 无论如何，这是可行的，但锻炼数组中的所有项目都会获得该颜色。 但正如我所说，我只想更改已单击的项目的颜色。

预先感谢您的帮助！

Answer 1

为了做到这一点，例如创建这样的exercisesArray数组 -

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

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

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

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

Answer 2

取一个变量并检查*ngFor索引，如果项目被点击改变颜色。

.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>

当 Item 被点击时更新你selectedItem变量并在你的ngStyle检查它以应用新的颜色。