从 Ionic 2 中的代码更改单选按钮“选中”属性答案

【问题标题】：Change radio button “checked” attribute from code in Ionic 2从 Ionic 2 中的代码更改单选按钮“选中”属性
【发布时间】：2017-09-30 02:33:41
【问题描述】：

我正在使用 Ionic 2。我有一个广播组（更改语言）：

 <ion-list radio-group >
  <ion-item *ngFor="let language of languages">
    <ion-label>{{language.name}}</ion-label>
    <ion-radio id="language.id" (ionSelect)='showConfirmAlert(language.id)' [checked]="isLanguageSelected(language.id)" [value]="language.name"></ion-radio>
  </ion-item>
</ion-list>

在选择项目时（单击单选按钮），项目会自动更改和检查。但是我需要显示一个确认警报，然后，如果用户取消，取消项目选择并返回到初始检查项目。

“checked”属性与我的代码绑定

isLanguageSelected(lang){
  let answer = (lang === this.actualLanguage) ? true : false;
  return answer;
}

 chooseLanguage(lang){
     this.actualLanguage = lang;
     this.appGlobals.set('actualLanguage', this.actualLanguage);
}

它适用于第一次到达页面，但如果我再次启动，例如选择英语：

this.chooseLanguage('en') ;

this.actualLanguage 如果我登录它，则很好地更改为“en”，和this.isLanguageSelected('en'); 返回true，但是 en-item 的“已检查”值未绑定到它，并且 item 未更新。

有没有办法从代码更新项目检查属性，而不仅仅是点击单选按钮？

谢谢！

更新答案：

最后我通过使用 [(ngModel)] 变量并在我的代码中切换一些元素来解决这个问题（删除 ionSelect，更改值的绑定变量......）

<ion-list radio-group [(ngModel)]="selectedLanguage" (ionChange)="onChange()" >
  <ion-list-header>
    Choisissez la langue {{actualLanguage.id}} 
  </ion-list-header>
  <ion-item *ngFor="let language of languages">
     <ion-label>{{language.name}}</ion-label>
    <ion-radio  id="language.id" (click)='showConfirmAlert(language.id)'  [value]="language.id"></ion-radio>
  </ion-item>
</ion-list>

【问题讨论】：

定义variable: boolean并与<ion-toggle [(ngModel)]="variable"></ion-toggle>绑定，然后你可以从代码中设置变量..让我知道是否有效，我会补充回答:)
谢谢@mosca90，我终于解决了添加 [(ngModel)] 变量的问题，正如你所建议的那样。我会更新我的帖子。谢谢！
我添加了答案，以便您接受并关闭此问题！ @大卫安奎汀

标签： angular data-binding radio-button ionic2 radiobuttonlist

【解决方案1】：

在您的 .ts 页面中：

定义一个布尔变量：checkedRadio: boolean
将变量绑定到您的组件：<ion-radio [(ngModel)]="checkedRadio"></ion-radio>

现在您可以通过this.checkedRadio = false 或this.checkedRadio = true 等代码设置值

希望对你有所帮助。 :)

【讨论】：