Ionic select 卡片列表

Question

我正在尝试 select 单击类别列表。当我点击时，背景颜色必须改变，如果我再次点击相同的颜色，背景必须 return 为默认颜色。如果我没有 select 任何类别或有 select 编辑的类别列表

，我需要能够拥有所有类别的列表

我现在的代码是这样工作的：如果我点击卡片，背景颜色变为粉红色，如果我再次点击，它不会改变，我只能 select 一项

page.html

  <ion-grid>
    <ion-row>
        <ion-card
        *ngFor="let tag of tags; index as i;"
        [ngClass]="{ 'use-pink-background': currentSelected == i}"
        (click)="handleClick(i, tag.id)">
          <ion-card-header >
            <ion-item lines="none">
              <p>{{ tag.name_it }}</p>
              <span>{{ tag.id }}</span>
            </ion-item>
          </ion-card-header>
        </ion-card>
    </ion-row>
  </ion-grid>

page.scss

.use-pink-background{
    --ion-background-color: pink;
  }

page.ts

  constructor(private _mysrvTags: TagsService) { }

  ngOnInit() {
    this.loadTags();
  }

   loadTags(){
    this._mysrvTags.getTags().subscribe({
      next: (data:any)=>{
        this.tags = data.taglist
      }
    })
  }


  public currentSelected: Number = null;
  handleClick(i, tag) {
      this.currentSelected = i;
  }

我想做这样的事情：

Answer 1

问题与您的 ngClass 中的逻辑有关。

当您的问题表明您希望拥有多个项目时，您只是在测试单个值。

您在 handleClick 中的逻辑也不正确，因为您将值设置为 true 但从未将其设置为 false。这就是为什么你可以 select 一次但不能 deselect.

您的问题实际上与 Ionic 框架没有任何关系，而是一个逻辑问题。

为了节省时间和清楚起见，I have broken it down to a working solution found here at stackblitz.

应用组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  tags=[{
    name_it: 'foo1',
    id: 'foo1',
  },
  {
    name_it: 'foo2',
    id: 'foo2',
  },
  {
    name_it: 'foo3',
    id: 'foo3',
  }];

  currentSelected = new Array(this.tags.length);

  handleClick(index: number, id: string) {
   // the double bang evaluates null/undefined to falsey
   // so you get the initial value set
   // the third bang correctly toggles the value
   this.currentSelected[index] = !!!this.currentSelected[index];
   console.log('tags', this.currentSelected);
  }
}

app.html

<div *ngFor="let tag of tags; index as i;"
[ngClass]="{ 'use-pink-background': currentSelected[i]}"
(click)="handleClick(i, tag.id)">
{{tag.name_it}}
</div>

app.css

.use-pink-background{
  background-color: pink;
}

下面是在您的代码中实现的相同内容，但未经测试： page.html

<ion-grid>
    <ion-row>
        <ion-card
        *ngFor="let tag of tags; index as i;"
        [ngClass]="{ 'use-pink-background': currentSelected[i] == i}"
        (click)="handleClick(i, tag.id)">
          <ion-card-header >
            <ion-item lines="none">
              <p>{{ tag.name_it }}</p>
              <span>{{ tag.id }}</span>
            </ion-item>
          </ion-card-header>
        </ion-card>
    </ion-row>
  </ion-grid>

page.ts

constructor(private _mysrvTags: TagsService) { }

  currentSelected = [];

  ngOnInit() {
    this.loadTags();
  }

   loadTags(){
    this._mysrvTags.getTags().subscribe({
      next: (data:any)=>{
        this.tags = data.taglist;
        this.currentSelected = new Array(tags.length);
      }
    })
  }


  public currentSelected: Number = null;
  handleClick(i, tag) {
      // double bang will evaluate null/undefined to falsey
      // so the boolean will initialize itself for free
      // then the third bang toggles the boolean correctly
      this.currentSelected[i] = !!!this.currentSelect[i];
  }

Ionic select 卡片列表

Ionic select list of cards

ionic-framework

angular