Question

我正在发出GET请求以获取包含选项数组的一些JSON。在每个元素中，我都有id，style和name。

根据回复，我想在我的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等时

e.g。

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

在Ionic 2中动态设置ActionSheet的选项

1 个答案: