Angular中如何获取Alert弹窗输入框的数值？

你的代码无法获取输入值的核心问题是：没有监听弹窗关闭事件来获取用户输入，且直接打印未定义的name变量。以下是修正方案：

修正后的代码 #

async presentAlert() {
    const alert = await this.atrCtrl.create({
      header: 'Please enter quantity Issued',
      buttons: ['OK'],
      inputs: [
        {
          name: 'quantity',
          type:'number',
          placeholder: 'Quantity issued',
          value: '',
          min: 1,
          max: 100,
        },
      ],
    });

    // 监听弹窗关闭，获取用户输入数据
    const dismissData = await alert.onDidDismiss();
    if (dismissData.data) {
      // 根据输入框name取出对应值
      const inputQuantity = dismissData.data.values.quantity;
      // 转换为数字类型（可选，根据需求）
      const quantity = Number(inputQuantity);
      console.log('输入的数量：', quantity);
    }

    await alert.present();
  }

关键说明 #

• Ionic的AlertController需要通过onDidDismiss()方法获取弹窗关闭后的用户操作数据，该方法返回一个Promise，包含用户输入的表单值和点击的按钮信息。
• 返回的dismissData.data.values是一个对象，键为输入框的name属性，值为用户输入内容。
• 若需区分用户点击的按钮（比如多按钮场景），可以给按钮配置role属性，再通过dismissData.role判断：

  // 创建弹窗时给按钮加role
  buttons: [
    {
      text: 'OK',
      role: 'confirm'
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
  ]
  
  // 监听时判断
  const { role, data } = await alert.onDidDismiss();
  if (role === 'confirm' && data) {
    console.log(data.values.quantity);
  }
  

内容的提问来源于stack exchange，提问作者Loftie Fourie