Ionic3 Action Sheet with Variable Inputs - ionic-framework

Question

I need to create an action sheet or some other kind of alert which displays options to a user and saves the option they clicked in a variable. However, the options displayed to the user need to be retrieved from Firestore and are different for each user (each user also may have a different number of options).
I’ve been able to display these options in an action sheet, but I’m struggling to get the value of the option they clicked.
Below is my code for the function so far. The list of options retrieved from Firestore is saved in an array called ‘options’.
categorizeProblem(){
this.action = this.actionCtrl.create({
title: "What sort of problem did this student have?",
})
this.options.forEach(option => {
var button = {
text: option,
value: //option name
handler: (data)=> {
//Need to get the value/name of the option clicked and save this in a variable
}
}
this.action.addButton(button);
})
this.action.present();
}
I would really appreciate if someone could help me with this or suggest an alternate way to do this.
Thanks in advance!

Answer 1

You can use the text property as your identifier. And then your handler should use the old function syntax so you will have the value of handler's this.
Might sound confusing but here's the code, that should demonstrate my point clearly.
presentActionSheet() {
var self = this;
let options = [
"Option1",
"Option2",
"Option3"
];
let actionSheet = this.actionSheetCtrl.create({
title: 'Categories',
});
options.forEach(option => {
actionSheet.addButton({
text: option,
handler: function() {
self.selectedOption = this.text;
}
})
});
actionSheet.present();
}
Here's the running code.