Question

我有问题。我用HTML中的按钮创建了一个循环。所以现在我希望他们在按下按钮时改变颜色。但我有问题，他们都改变了颜色。但我只想改变按下的按钮的颜色。

HTML

 <ion-item *ngFor="let friend of friendsList">
      <ion-avatar item-start>
        <img src={{friend.img}}>
      </ion-avatar>
      <button ion-button color="rank" class="avat"> </button>
      <h2>{{friend.name}}</h2>
      <p>{{friend.status}}</p>
      <button (click)="toggleNamedColor()" ion-button round color="rank" [color]="ionicNamedColor" item-end>+Add</button>

    </ion-item>

  </ion-list>

TS

public ionicNamedColor: string = 'rank';

public toggleNamedColor(): void {
      if(this.ionicNamedColor === 'rank') { 
        this.ionicNamedColor = 'primary'
      } else {
        this.ionicNamedColor = 'rank'
      }
    }

Answer 1

请尝试使用ngFor中的索引

<强> HTML

<ion-item *ngFor="let friend of friendsList;let i = index">
      <ion-avatar item-start>
        <img src={{friend.img}}>
      </ion-avatar>
      <button ion-button color="rank" class="avat"> </button>
      <h2>{{friend.name}}</h2>
      <p>{{friend.status}}</p>
      <button (click)="curIndex = i" ion-button round [color]="curIndex == i ? 'rank' : 'primary'" item-end>+Add</button>

    </ion-item>

在.ts文件中声明此变量

curIndex:number = null;

参考stackblitz demo

Answer 2

你可以像这个例子一样尝试通过向对象添加颜色属性并在点击时更改该对象的颜色属性

 <ion-list> 
    <ion-item *ngFor="let friend of friendsList">
          <ion-avatar item-start>
            <img src={{friend.img}}>
          </ion-avatar>
          <button ion-button color="rank" class="avat"> </button>
          <h2>{{friend.name}}</h2>
          <p>{{friend.status}}</p>
          <button (click)="toggleNamedColor(friend)" ion-button round color="rank" [color]="friend.ionicNamedColor" item-end>+Add</button>

        </ion-item>

      </ion-list>

并且在ts

public toggleNamedColor(friend): void {
      if(friend.ionicNamedColor === 'rank') { 
        friend.ionicNamedColor = 'primary'
      } else {
        friend.ionicNamedColor = 'rank'
      }
  }

如何更改只有一个按钮的颜色？

2 个答案: