时间戳

首页 > 解决方案 > 如何使用localstorage使用Ionic3更改离子列表中的按下项目背景颜色

ionic-framework - 如何使用localstorage使用Ionic3更改离子列表中的按下项目背景颜色

问题描述

请帮助我，我想使用localstorage使用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'},
];

标签： ionic-frameworkionic3

解决方案

不需要localstorage这个。

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

  1. 使用ngStyle
  2. 使用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>

工作示例

推荐阅读