Dynamische Einstellung der Optionen für ein ActionSheet in Ionic 2

Question

Ich mache eine GET-Anfrage, um einige JSON zurück zu bekommen, die ein Array von Optionen enthalten. In jedem Element habe ich eine ID, einen Stil und einen Namen.

Basierend auf der Antwort möchte ich die Optionen meines ActionSheets dynamisch in meiner Ionic 2 App einstellen.

Dieses ActionSheet funktioniert einwandfrei. Meine Herausforderung besteht darin, die Optionen basierend auf der API-Antwort dynamisch festzulegen.

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

Ich möchte, dass die Abbrechen Option, aber zeigen Sie meine eigenen Optionen oben - d. H. Entfernen Sie die destruktiven und Archivierungsoptionen.

In PHP ich das mit diesem Pseudo-Code erreichen würde ..

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

Und dann ist meine letzte Frage, wie ich den entsprechenden Wert von id aus den Elementen angeben, die ich als Parameter am Schleifen für der Aufruf myFunction() ... zB den Wert von XX auf 1 setzen, wenn ID = 1, 20 wenn ID = 20, usw.

z

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

Answer 1

Ich habe einen besseren Weg gefunden, um dieses Problem zu lösen. Ich verwende die addButton-Methode.

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