如何显示选中的单选按钮

Question

我必须根据支持的响应显示我的广播组。 下面的 html 代码在我的侧边菜单中

这是我的代码：

 <ion-list radio-group [(ngModel)]="selectedLanguage"  class="list-space">

            <ion-item *ngFor="let language of languageArray; let val = index" class="radio" > 
              <ion-label menuClose>{{language.local}}</ion-label>
              <ion-radio item-left checked={{languageChoosen}} [value]="language" menuClose  (click)="doSomething(language)"></ion-radio> 
            </ion-item>

          </ion-list>

如您所见，我给出的 checked={{languageChoosen}} 是来自 .ts 文件的变量。

如果用户更改任何内容，我可以在我的应用程序第一次打开时显示选定的单选选项，然后我将无法显示选定的单选选项。

更新

doSomething(event){ 
    console.log("invoking dosomething fun");
    console.log("checking event params "+event);

    let languageObj

    if(event){
      languageObj = {
        lang_id: event.lang_id
      }

      console.log("cheking languageObj " + JSON.stringify(languageObj));
      // this.holders.presentLoadingCustom();

      this.rest.post('/language',languageObj)
      .subscribe((result)=>{;
        // this.holders.dissmissLoadingCustom()
        console.log("checking data of success " +JSON.stringify(result));
        if(result.status == '1'){
          this.logger.debug("checking "+this.selectedLanguage);
          this.selectedLanguage = '';
          this.toggleLanguages();
          for(var i = 0; i < this.languageArray.length; i++){
            if(languageObj.lang_id == this.languageArray[i].lang_id){
              this.languageChoosen = this.languageArray[i].local;
            }
          }
          this.checkLanguageReq();
        }
        else{
          console.log("error");
        }
      });

    }
    else{
      console.log("error of languages automatic call");
    }

  }

Answer 1

您不需要使用 checked 属性 (checked={{languageChoosen}})，因为单选选项将与 [(ngModel)]="selectedLanguage" 一起选择。因此，您唯一需要做的就是使用语言 object 初始化 selectedLanguage 属性（因为每个单选项的值都是一个对象：[value]="language"）。

另请注意，您可以避免在 html 代码中使用 menuClose 属性，并在选择选项时使用 ts 代码中的 this.menuCtrl.close(); 方法：

constructor(private menuCtrl: MenuController) {
    // ...
}

public doSomething(language: any): void {
    // First close the menu
    this.menuCtrl.close();

    //...
}

Answer 2

你可以这样做 在你的 HTML 中这样做

<input #ansa (click)="updateAnwer(ansa.value)" value="A" type="radio" id="quesA" name="ques">
<input #ansb (click)="updateAnwer(ansb.value)" value="B" type="radio" id="quesB" name="ques"> 

在上面的代码中，每当用户更改某些内容时，我都会分配一个要输入的 ID，然后我正在调用一个函数并找到选定的输入 ID 并将 true 应用于选中的属性，如下所示，它对我来说工作正常

uncheckedR(value){                                                 
   if(value == 'A'){
      (<HTMLInputElement>document.getElementById('quesA')).checked = true;
    }else if(value == 'B'){
      (<HTMLInputElement>document.getElementById('quesB')).checked = true;
    }else{
      (<HTMLInputElement>document.getElementById('quesA')).checked = false;
      (<HTMLInputElement>document.getElementById('quesB')).checked = false;
   }
}

在你想要检查收音机的地方调用这个函数

Answer 3

对我来说很好用......

function checkedRdButton(value)
{
   if(value=="A")
    {
      $("#rdtab0").prop('checked', true);
    }
   else
   {
      $("#rdtab1").prop('checked', true);
   }
}