Wie zeigt man das Optionsfeld an?

Question

Ich muss meine Radio-Gruppe überprüfen, basierend auf der Antwort von Backed. unter HTML-Code ist in meiner Seite Menüs

hier ist mein Code:

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

Wie Sie i checked={{languageChoosen}} gegeben haben, sehen kann, ist eine Variable aus .ts-Datei.

Ich kann die ausgewählte Radiooption beim allerersten Mal in meiner App anzeigen, wenn der Benutzer etwas ändert, danach kann ich die gewählte Radiooption nicht mehr anzeigen.

UPDATE

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

Sie diese in Ihrem HTML tun kann

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

in obigem Code wie dies tun, habe ich eine id Eingang zugewiesen, wenn die Benutzer Änderungen etwas, dann rufe ich eine Funktion auf und finde die ausgewählte Eingabe-ID und true für das geprüfte Attribut wie folgt und es funktioniert gut für mich

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

Aufruf dieser Funktion, wo Sie halten Radio wollen zu prüfen

Answer 2

Es funktioniert gut für mich ......

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

Answer 3

Sie brauchen nicht die checked verwenden Eigenschaft (checked={{languageChoosen}}), weil die Radiooption mit der [(ngModel)]="selectedLanguage" ausgewählt wird. Das einzige, was Sie tun müssen, ist die selectedLanguage Eigenschaft mit der Sprache Objekt zu initialisieren (da der Wert jedes Funkelements ein Objekt ist: [value]="language").

Beachten Sie auch, dass Sie in Ihrem HTML-Code mit dem menuClose Attribut vermeiden können, und verwenden Sie die this.menuCtrl.close(); Methode von Ihrem ts Code, wenn eine Option ausgewählt ist:

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

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

    //... 
}