具有可变输入的 Ionic3 动作 Sheet

Question

我需要创建一个操作 sheet 或某种其他类型的警报，向用户显示选项并将他们单击的选项保存在变量中。但是，向用户显示的选项需要从 Firestore 中检索，并且每个用户都不同（每个用户也可能有不同数量的选项）。

我已经能够在操作中显示这些选项 sheet，但我很难获得他们点击的选项的价值。

下面是我到目前为止的函数代码。从 Firestore 检索到的选项列表保存在名为“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();

}

如果有人可以帮助我解决这个问题或提出替代方法，我将不胜感激。

提前致谢！

Answer 1

您可以使用 text 属性作为您的标识符。然后你的 handler 应该使用旧的函数语法，所以你将拥有 handler 的 this.

的值

可能听起来很混乱，但这是代码，应该可以清楚地证明我的观点。

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 运行代码。

具有可变输入的 Ionic3 动作 Sheet

Ionic3 Action Sheet with Variable Inputs

alert

uiactionsheet

ionic-framework

ionic3

google-cloud-firestore