添加可點擊按鈕到離子2卡編程

我有一個HTML模板，details.html，其包括這樣的：添加可點擊按鈕到離子2卡編程

<ion-card>{...first card on page...}</ion-card> 

    <ion-card [hidden]="showColorBool"> 
    <ion-card-header> 
     Select a color 
    </ion-card-header> 
    <ion-card-content> 
     <!-- buttons should go here --> 
    </ion-card-content> 
    </ion-card> 

    <ion-card>{...next card on page...}</ion-card>

我需要添加的按鈕如上所述。他們將將根據包含的細節陣列我已經存儲在本地存儲這樣的值來稱呼：

<button ion-button color={{data[index][color]></button>

我能夠訪問我從這樣的存儲需要的陣列和價值觀在我細節。 TS：

arr.then(data => { 
    console.log(data); 
    for (let index in data){ 
     console.log(data[index][color]); 
    } 
    });

1）按鈕的數量始終是動態的（0-10）。 2）需要「顏色」值來設置按鈕的顏色值。 3）我不能把這個功能放在它自己的組件/頁面中。它需要與其他卡片在頁面上。

有關我如何完成此任務的任何想法？我已經通過了文檔和所有我能找到的東西。在這個動態的東西上找不到太多東西。

來源

2017-03-23 detourOfReason

ngFor是你所追求的。

ngFor指令：https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

的ngFor指令允許你遍歷模板的數組。

details.html

<button *ngFor="let item of data" ion-button color="{{item[color]}}"></button>

來源

2017-03-23 23:28:11 Carlton

感謝@Carlton。你的回答有助於解決問題。我正在看按鈕中的ngFor在推杆上。但是，如果其他noob有這個問題，我需要指出的另一個問題是放置我的承諾代碼，我把它放在我的_ionViewDidEnter_函數中，這個函數在生命週期中太晚了。將它放在_ionViiewDidLoad_中或之前。另外，在我的情況下，html語法需要是這樣的：'' – detourOfReason

添加可點擊按鈕到離子2卡編程

回答

相關問題