문제가 있습니다. 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'
}
}
객체에 색상 속성을 추가하고 클릭시 해당 객체의 색상 속성을 변경하여이 예제와 같이 시도 할 수 있습니다.
<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'
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다