Ionic2 - ラジオアラートを選択したままにすることができません

Question

私はIonic2アプリでラジオアラートを実装しています。

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(); 

ボタンをクリックするとポップアップが表示されます。最初のラジオボタンを選択して[OK]ボタンをクリックすると、次のようになります。

私は再びそれを開くと、私は以前に選択したラジオボタンが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(); 
}