Question

请帮助我，我想使用局部存储在Ionic3中更改离子列表中被按下项目的背景颜色，因此单击的项目具有灰色背景，而未单击的项目具有白色背景。这是我的html代码：

<ion-item *ngFor="let div of divs; let i = index" >
   {{ div.name }}
</ion-item>

这是ts文件上的数组

divs: any[] = [
    { name: '1'},
    { name: '2'},
    { name: '3'},
    { name: '4'},
    { name: '5'},
    { name: '6'},
];

Answer 1

不需要localstorage。

您可以使用以下两种方法来满足您的要求。

使用ngStyle
使用ngClass

使用ngStyle
的解决方案

将isClicked数组中的每个元素的布尔属性保留为divs，并在单击列表项时更改其值，然后根据ngStyle设置isClicked。

示例

TS

export class ExamplePage {

  divs;

  constructor() {

    this.divs = [
        { name: '1', isClicked: false},
        { name: '2', isClicked: false},
        { name: '3', isClicked: false},
        { name: '4', isClicked: false},
        { name: '5', isClicked: false},
        { name: '6', isClicked: false},
      ];
      }

  onItemClick(div) {

      if (div.isClicked) {

        div.isClicked = false;

      } else {

        div.isClicked = true;
      }
  }
}

HTML

  <ion-item
      *ngFor="let div of divs" (click)="onItemClick(div)"
      [ngStyle]="{ background: div.isClicked ? '#FF5733': '#33FF93'}">

    {{ div.name }}
  </ion-item>

Working Example

如何使用局部存储在Ionic3中更改离子列表中的按下项目背景颜色

1 个答案: