選択したラジオボタンからIDと値を引き出すスクリプトが機能しない

Question

idとvalueの両方を選択したラジオボタンからプルしたいとします。私はこれは私がここにGet Radio Button Value with Javascript

道からの抜粋です

var radios = document.getElementsByName('genderS'); 

for (var i = 0, length = radios.length; i < length; i++) { 
    if (radios[i].checked) { 
     // do whatever you want with the checked radio 
     alert(radios[i].value); 

     // only one radio can be logically checked, don't check the rest 
     break; 
    } 
} 

私は角2

に出会ったし、それに打撃を与えることにしたいくつかの記事やブログにこのコードのスタイルに出くわしましたこの

selected = {value1: '', value2: ''}; //where I want the results to be stored. 

//custom function with the snippet implemented 
getSelected() { 
    const radios = document.getElementsByName(this.quesForm.value.name); 

    for (var i = 0, length = radios.length; i < length; i++) { 
     if (radios[i].click){ 
      this.selected.value1 = radios[i].getAttribute("id"); 
      this.selected.value2 = radios[i].getAttribute("value"); 
      break; 
     } 
    } 
} 

//calling it here in an attempt to make sure it detects when the selection changes. 
ngOnChanges() { 
    this.getSelected(); 
    console.log(this.selected); 
} 

私のテンプレートがこの

<div *ngFor="let ans of quesForm.value.answers"> 
    <input type="radio" 
     [attr.name] = "quesForm.value.name" 
     [attr.id] = "ans.id" 
     [attr.value] = "ans.answer" 
    /> 
    <label>{{ans.answer}}</label> 
</div> 

のように設定されているように私の角クラスでそれを実装しようとすることです

エラーは表示されませんが、結果ログも表示されません。formタグの外側にも結果が表示され、空のままになっています。

<p>{{selected | json}}</p> 

なぜこれが機能しないのですか？

Answer 1

使用データバインディングなどのDOMイベント：

テンプレート：

<div *ngFor="let ans of quesForm.value.answers"> 
    <input type="radio" 
     [attr.name] = "quesForm.value.name" 
     [attr.id] = "ans.id" 
     [attr.value] = "ans.answer" 
     (click)="selectAnswer(ans)" 
    /> 
    <label>{{ans.answer}}</label> 
</div> 

はコンポーネント：角2で

selectAnswer(ans) { 
    this.selected = ans; 
    console.log(this.selected); 
} 

は、DOMを直接generally bad practiceであり、通常、あなたに問題があることを示してアクセスします設計。