각도 2/이온 2의 특정 속성 값을 변경하는 방법은 무엇입니까?

Question

그래서 내가 동적으로 *ngFor

<ion-card *ngFor="let numbers of [0,1,2,3]; let i = index"> 

    <ion-card-content> 
     <ion-card-title clear> 
      Card {{i}} 
     </ion-card-title> 
    </ion-card-content> 


    <button ion-button block class="blockbutton" (click)="doSomething(i)"> 
     <ion-icon [name]="iconName" class="plussign"></ion-icon> 
     <div> Join Room </div> 
    </button> 

</ion-card> 

를 사용하여 카드를 만들어이 html하고이 차단 버튼을 클릭에, 내 그래서 .ts

export class FeedPage { 
    iconName : string; 

    constructor(public navCtrl: NavController) { 
    this.iconName = 'add-circle'; 
    } 
    } 

public doSomething(item): void{ 
    console.log(item); 
    this.iconName = 'checkmark-circle'; 
    } 

이 코드에있는 모든 모든 아이콘을 회전 차단 버튼을 checkmark-circle

어떻게 변경합니까? 특정 버튼의 아이콘 i. 즉 [name]의 속성은 checkmark-circle입니다.

해당 요소에 대해 index을 검색하는 데 성공했습니다. 그러나 어떻게 특정 단추 만 수정합니까?

Answer 1

배열은 iconNames입니다. 구성 요소 측면에서

<ion-icon [name]="iconName[i]" class="plussign"></ion-icon> 

:

public doSomething(item): void{ 
    console.log(item); 
    this.iconName[item] = 'checkmark-circle'; 
    } 
    } 

당신은 비록 카드의 수에 따라 전체 배열을 설정해야합니다.

iconNames:string[]=[]; 
    constructor(public navCtrl: NavController) { 
     //loop through your card count and push initial value. 
     iconNames.push(`add-circle`); 


    } 

Answer 2

배열의 각 항목마다 다른 아이콘 이름이 있어야합니다. 당신의 .html 중에서에서 지금

private _array = [{"iconName" : "name1"},{"iconName" : "name2"}]; // And so on.. 

:

먼저이처럼 .TS에서 객체의 배열을 유지

<ion-card *ngFor="let numbers of _array let i = index"> 

    <ion-card-content> 
     <ion-card-title clear> 
      Card {{i}} 
     </ion-card-title> 
    </ion-card-content> 


    <button ion-button block class="blockbutton" (click)="doSomething(numbers)"> 
     <ion-icon [name]="numbers.iconName" class="plussign"></ion-icon> 
     <div> Join Room </div> 
    </button> 

</ion-card> 

그리고 해봐요()가 될 것이다 :

public doSomething(item): void{ 
    console.log(item); 
    item.iconName = 'checkmark-circle'; 
}