首页 文章

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

提问于
浏览
1

我正在使用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 ,但是"checked" en-item的值未绑定到它,并且项目未更新 .

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

谢谢 !

UPDATE WITH ANSWER :

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

<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>

1 回答

  • 1

    在您的 .ts 页面中:

    • 定义一个布尔变量: checkedRadio: boolean

    • 将变量绑定到组件: <ion-radio [(ngModel)]="checkedRadio"></ion-radio>

    现在您可以从 this.checkedRadio = falsethis.checkedRadio = true 等代码中设置值

    我希望对你有所帮助 . :)

相关问题