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

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

您可以像此示例一样尝试通过向对象添加颜色属性并在单击时更改该对象的颜色属性

 <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'
      }
  }