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

它當用戶點擊一個按鈕彈出。我選擇了第一個單選按鈕並單擊確定按鈕，它看起來像這樣。

當我再次打開它，我先前選擇的單選按鈕沒有被設置爲真。它不會保持檢查狀態。相反，它會回到初始狀態。

我試圖將它保持爲選定狀態，以便用戶可以根據他/她選擇的值查看結果。

下面是完整的代碼：

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