Ionic2 - 无法将收音机警报保持为选中状态

Question

我正在Ionic2应用程序中实现Radio Alerts。我创建了一个这样的无线电警报：

let alert = this.alertCtrl.create();
alert.setTitle('Select a Radio Alert');
alert.addInput({
  type: 'radio',
  label: 'Side A',
  value: 'a',
  checked: false
});
alert.addInput({
  type: 'radio',
  label: 'Side B',
  value: 'b',
  checked: false
});

alert.addButton('Cancel');
alert.addButton({
  text: 'OK',
  handler: data => {
    console.log('selected value '+data)
  }
});
alert.present();

当用户点击按钮时会弹出。我选择了第一个单选按钮并单击了确定按钮，它看起来像这样。

当我再次打开时，我之前选择的单选按钮未设置为true。它不会保持原样。相反，它会回到初始状态。

我正在尝试将其保持为已选中状态，以便用户可以根据他/她选择的值查看结果。

这是完整的代码：

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  selector: 'radio-alert-demo',
  templateUrl: 'radio-alert-demo.html'
})
export class RadioAlertDemo {

  constructor(private alertCtrl: AlertController) {
  }

  setFilter() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Select a Radio Alert');
    alert.addInput({
      type: 'radio',
      label: 'Side A',
      value: 'a',
      checked: false
    });
    alert.addInput({
      type: 'radio',
      label: 'Side B',
      value: 'b',
      checked: false
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        console.log('selected value '+data)
      }
    });
    alert.present();
  }

}

Answer 1

您可以将所选值存储在组件的属性中，并在打开警报时使用该属性检查是否应选择默认情况下 ：

public selectedFilter: any;

// ...

setFilter() {
    let alert = this.alertCtrl.create(),
        firstInput = {
            type: 'radio',
            label: 'Side A',
            value: 'a'
        },
        secondInput = {
            type: 'radio',
            label: 'Side B',
            value: 'b'
        };

    // Set the status of each filter according to the selected value
    firstInput.checked = this.selectedFilter === 'a';
    secondInput.checked = this.selectedFilter === 'b';

    // Set the title
    alert.setTitle('Select a Radio Alert');

    // Add both inputs
    alert.addInput(firstInput);
    alert.addInput(secondInput);

    // Add the buttons
    alert.addButton('Cancel');
    alert.addButton({
        text: 'OK',
        handler: data => {
            console.log('selected value ' + data)

            // Save the selected value
            this.selectedFilter  = data;
        }
    });

    // Show the alert
    alert.present();
}