如何設置Ionic 2中單選按鈕警報的值

Question

我有包含12個以上選項的單選按鈕警報，我想檢查與我的變量值相等的選項。

我用if語句來做這個事情的時候少於4個選項。但現在我有超過12個選項，所以我希望有更簡單的方法來檢查我的變量的值並選擇相等的選項。

---編輯---

這是我的HTML的一部分

<button ion-button clear full (click)="selectColor(x.color)">{{x.color}}</button> 

.TS功能（我希望有一個更好的方式來選擇警報的單選按鈕（如果有的話） ）

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
alert1.setTitle('Color Theme'); 
    if(color=="red"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Red', 
      value: 'red', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Red', 
      value: 'red', 
     }); 
    } 
    if(color=="pink"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Pink', 
      value: 'pink', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Pink', 
      value: 'pink' 
     }); 
    } 
    if(color=="purple"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Purple', 
      value: 'purple', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Purple', 
      value: 'purple' 
     }); 
    } 
    if(color=="blue"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Blue', 
      value: 'blue', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Blue', 
      value: 'blue' 
     }); 
    } 
    ... 
alert1.addButton('Cancel'); 
alert1.addButton({ 
    text: 'Okay', 
    handler: data => { 
      ... 
    } 
}); 
alert1.present(); 
} 

Answer 1

是的，有一個簡單的方法可以做到這一點。你可以只添加條件在checked屬性是這樣的：

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
    alert1.setTitle('Color Theme'); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Red', 
     value: 'red', 
     checked: color === "red" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Pink', 
     value: 'pink', 
     checked: color === "pink" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Purple', 
     value: 'purple', 
     checked: color === "purple" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Blue', 
     value: 'blue', 
     checked: color === "blue" 
    }); 

    // ... 

    alert1.addButton('Cancel'); 
    alert1.addButton({ 
     text: 'Okay', 
     handler: data => { 
      // ... 
     } 
    }); 

    alert1.present(); 
} 

編輯

還有一個更好的方式使用forEach循環，並與所有顏色的數組添加所有的顏色， ：

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
    alert1.setTitle('Color Theme'); 

    // Add the new colors here! 
    const colors = ['Red', 'Pink', 'Purple', 'Blue']; 

    colors.forEach(color => { 
     alert1.addInput({ 
      type: 'radio', 
      label: color, 
      value: color.toLowerCase(), 
      checked: color === color.toLowerCase() 
     }); 
    }); 

    // ... 

    alert1.addButton('Cancel'); 
    alert1.addButton({ 
     text: 'Okay', 
     handler: data => { 
      // ... 
     } 
    }); 

    alert1.present(); 
}