如何更改Angular 2/ionic 2中的特定屬性值？

所以我有這個html其動態創建使用*ngFor如何更改Angular 2/ionic 2中的特定屬性值？

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

所以這個代碼，就點擊阻止按鈕，關閉所有的所有的圖標塊按鈕向checkmark-circle

如何更改只特定按鈕的圖標我。例如[name]屬性爲checkmark-circle。

我已經成功地檢索到該元素的index。但是，如何修改特定按鈕？

來源

2017-04-04 Sai Datta

有一列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`); 


    }

來源

2017-04-04 10:25:16

謝謝。得到它的工作。我剛剛開始使用Angular 2 ...但是這不是簡單的複雜嗎？所有這些在jQuery中更容易，我只需要執行'$（this）.attr（'name'，'add-circle'）'，我的問題是，Angular的實現有什麼優勢？ –

我會有一個單獨的對象包含一個特定的卡細節，並設置所有信息在循環..這樣你就不需要一個不同的循環來初始化圖標..jQuery允許輕鬆地處理DOM元素，但它不能用於Angular和它的變化檢測 –

對於數組中的每個項目，您應該有不同的圖標名稱。

首先保持你的.ts這樣的對象的數組：

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

現在，在您的.html：

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

來源

2017-04-04 10:29:30

如何更改Angular 2/ionic 2中的特定屬性值？

回答

相關問題