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

Posted 2023-03-13

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

【英文标题】：How to change only one ion-item color in ion-list when clicked?

【发布时间】：2021-02-17 11:40:39

【问题描述】：

我尝试了多种方法，但我似乎无法弄清楚这一点。 我有一个 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 中的所有项目都得到了那种颜色。 但正如我所说，我只想更改已点击项目的颜色。

提前感谢您的帮助！

【问题讨论】：

您是否只想继续将其显示为选定项目并在用户单击另一个项目时更改颜色？

【参考方案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 中检查它以应用新颜色。

【参考方案2】：

为此，请像这样创建exercisesArray -

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

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

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

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

【讨论】：

感谢您的回答。通过将每个项目的对象设置为“作为键”，我并没有真正理解您的意思，或者我真的不知道该怎么做。你能解释一下吗？