角度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> 

を使用してカードを作成し、これが私の.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'; 
    } 

にしたがって、このコードは、ブロック]ボタンをクリックする上で、すべてのすべてのアイコンをオンさせ、このhtmlを持っていますブロックボタンをcheckmark-circle

どのように変更するのですか特定のボタンのアイコンi。 e。[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> 

とdoSomethingのは（）になりますが：

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