動態設置Ionic 2中ActionSheet的選項

Question

我正在發出一個GET請求來取回一些包含選項數組的JSON。在每個元素中，我都有一個id，樣式和名稱。

基於響應，我想在我的Ionic 2應用程序中動態設置ActionSheet的選項。

此ActionSheet正常工作。我的挑戰是根據API響應動態設置選項。

let actionSheet = this.actionSheetCtrl.create({ 
title: 'Change the tag of this visitor', 
buttons: [ 
    { 
    text: 'Destructive red', 
    cssClass: 'label-red', 
    handler:() => { 
     myFunction(1); 
    } 
    }, 
    { 
    text: 'Archive blue', 
    cssClass: 'label-dark-blue', 
    handler:() => { 
     myFunction(2); 
    } 
    }, 
    { 
    text: 'Cancel', 
    role: 'cancel', 
    handler:() => { 
     console.log('Cancel clicked'); 
    } 
    } 
] 
}); 

我想保留取消選項，但顯示我自己的選項上面 - 即刪除破壞性和歸檔選項。

在PHP中我會用這個僞代碼實現這個..

$options = array(); 
$options['title'] = 'Change the tag of this visitor'; 

$buttons = array(); 

foreach($api_response as $a) { 
    array_push($buttons, array('text' => $a['name'], 'cssClass' => $a['style'])); 
} 

$options['buttons'] = $buttons; 

let actionSheet = this.actionSheetCtrl.create(json_encode($options)); 

然後我的最後一個問題是我怎麼可以從我通過循環作爲參數的元素指定ID的合適值myFunction（）調用...例如，當id = 1時將XX的值設置爲1，當id = 20時將20的值設置爲20等

eg

text: 'Name goes here', 
cssClass: 'label-red', 
handler:() => { 
    myFunction(XX); 
} 

Answer 1

我似乎找到了更好的方法來解決這個問題。我正在使用addButton方法..

let actionSheet = this.actionSheetCtrl.create({ 
    title: 'Change the tag of this visitor' 
});  

this.http.get('http://api.domain.com/tags', {headers:headers}).map(res => res.json()).subscribe(data => { 
    for (var i = 0; i < data.res.length; i++) { 
     actionSheet.addButton({text: data.res[i].name, cssClass: data.res[i].style });   
    } 
}); 

actionSheet.addButton({text: 'Cancel', 'role': 'cancel' });  

actionSheet.present();