时间戳

首页 > 解决方案 > 如何单独更改数组中的颜色？

html - 如何单独更改数组中的颜色？

问题描述

基本上我正在做一个 Ionic 5 应用程序，我将一些信息从一个数组显示到一个数组中，当你点击它应该改变背景的颜色，但是当我点击它时，它会改变所有卡片的颜色，而不是唯一一个我点击了。

这是颜色变化的 .ts 部分：

  private buttonColor: string = "light";

  someAction() {
    this.buttonColor = "primary";
  }

这是.html：

<ion-grid>
    <ion-row>
      <ion-col *ngFor="let A of Animales">

        <ion-card [color]="buttonColor" (click)="someAction()" tappable>

          <ion-card-content>

            <ion-title>{{A.nombre}}</ion-title>
            <div><img src="{{A.imagen}}"></div>
            <p>{{A.nombre}} {{A.raza}} es un {{A.especie}}. Su alimentación es a base de
              {{A.alimentacion}},
              por lo general viven en {{A.ecosistema}}.</p>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

标签： htmlangulartypescriptionic-framework

解决方案

这是工作示例

  Animales = [{
    nombre: "Hellow",
    raza: "Hellow"
  },
  {
    nombre: "Hellow",
    raza: "Hellow"
  },{
    nombre: "Hellow",
    raza: "Hellow"
  },{
    nombre: "Hellow",
    raza: "Hellow"
  },

  ]
  buttonColor =['secondary','dark','danger'];

.html

 <ion-grid>
    <ion-row>
      <ion-col *ngFor="let A of Animales ;let i = index">
        <ion-card [color]="buttonColor[i]" (click)="someAction(i)" tappable>
          <ion-card-content>
            <ion-title>{{A.nombre}}</ion-title>
            <div><img src="{{A.imagen}}"></div>
            <p>{{A.nombre}} {{A.raza}}
              </p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

推荐阅读