在 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= 时将 XX 的值设置为 1 1、20（当 id=20 等）

例如

 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();