如何将禁用按钮添加到离子 2 警报

Question

我创建了一个 ionic2 警报，我必须根据条件禁用按钮。

这是我的代码的简单结构：

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox(condition) {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',

      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

Okay如果给定条件是true（传递给showCheckbox()函数的参数“条件”），我必须禁用按钮。

Answer 1

我知道这个问题是一年多前提出的，以防其他人需要它。

我创造了一些，我想说，“解决方法”，它就像一个魅力。

alert.present()提供了一个Promise，以便我们可以在成功创建警报后收听它。

现在，这就是我所做的：

alert.present().then(() => {

    /** disable the confirm button initial */
    document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');
    return;
});

通过上面的查询访问确认按钮有点麻烦document.querySelector();，但是确认按钮没有我所看到的唯一标识符，类似的东西role="confirm"。

因此，您需要编写一个函数，每次单击您的输入（通过handler）都会触发该函数。

alert.addInput({
   type: 'checkbox',
   label: 'testLabel',
   value: 'testValue',
   handler: () => {
      functionToCheckConfirmButtonState();
   }
});

您需要检查functionToCheckConfirmButtonState();函数内的复选框值并启用确认按钮：

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').removeAttribute('disabled');

或者使用以下命令再次禁用它：

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');

希望我能帮忙。

干杯Unkn0wn0x