@Outputに渡すために、選択したラジオボタンからIDと値を取得するにはどうすればよいですか？

Question

私は数年前に静的なフォーム要素でJQueryを使ってきましたが、今ではAngular2とTypescript 2を使用しているので、常に同じデータではなく、私はこれを理解するために必要な「抽象度」の程度を頭で包み込むことはできません。

これまでのところ、すべてが設定されています。 Firebase

{ 
    "page_area_business_image"  : { 
     "expand" : { 
      "intro" : "some info...", 

      "title" : "a title" 
     }, 
     "rebrand" : {....}, 
     "newbrand" : {....}, 
     "questions" : { 
      "question01" : { 
       "id"  : "an ID", 
       "name"  : "a name", 
       "question" : "a question", 
       "answers" : [ 
        "answer01" : { 
         "answer" : "some answer", 
         "id"  : "an ID" 
        }, 
        "answer02" : { 
         "answer" : "another answer", 
         "id"  : "an ID" 
        }, 
        "answer02" : { 
         "answer" : "another answer", 
         "id"  : "another ID" 
        } 
       ] 
      }, 
      "question02" : {....}, 
      "question03" : {....} 
     } 
    } 
} 

から入ってくる

データは、私はそれが私が質問のために作られた「複数選択」コンポーネントである自分の子コンポーネントのしている子コンポーネントまで、このデータを渡します。テンプレートは、この

<fieldset [attr.id]="question?.id" class="card col-8 justify-content-center"> 

    <label class="ques-title"> 
     {{featureQuestion?.question}} 
    </label> 

    <div class="row answer-row-section justify-content-center"> 

     <div *ngFor="let answer of featureQuestion?.answers" class="col col-12 answer-row justify-content-center"> 
      <div class="col justify-content-center"> 

       <input type="radio" 
        [attr.id] = "answer.id" 
        [attr.name] = "name" 
        [attr.value]= "answer.answer" 
        hidden /> 

       <label [attr.for]="answer.id" class="col ques-ans-title" style="background-color: #4b73a0;"> 
        {{answer.answer}} 
       </label> 
      </div> 
     </div> 

    </div> 

</fieldset> 

のような入ってくる疑問は、これは私のコンポーネントクラスは、これまで

export class MultipleChoiceRadioComponent implements OnInit, OnChanges { 

    @Input('question') 
    featureQuestion: any; 

    @Output() 
    answerO: string; 
    // Will be used to send the result back up to parent where if statements will trigger other elements 



    ngOnChanges(){ 

     // I plan to put whatever I come up with here so the value can update if it changes. 
     //console.log(this.answerO); 
    } 

    ngOnInit() { 

    } 
} 

どのようなものか、私はこの How to set radio button checked in Angular 2 に出くわしたが、それは多かれ少なかれ、真または偽をトリガしているバインド私が親コンポーネントで行うことを計画している結果、multiple choiceコンポーネントはそれほど具体的ではないので、私はそれを私が必要とするものに変換する方法を理解できませんでした。

私はこの https://angular.io/docs/ts/latest/cookbook/dynamic-form.html# 他の方法で非常に有益かつ有用かかわらずに私を導いたこの Radio buttons in Angular2 Model Driven forms not working as expected に出くわし、それはラジオボタンの何も言います。私は同じ方法ですべてをリンクすると思っていますが、ラジオボタンを扱うことと、選択されたIDから希望の結果を引き出すことの両方に独特の歪みがあると推測しています。

これは私が行う必要があるものに最も近いと思われます http://www.talkingdotnet.com/bind-radiobutton-list-in-angular-2/適切なクラスを作成するために自分のデータが設定されている方法で私が個人的に行う必要があることを理解しているだけでなく、コンポーネントにデータが既にロードされているので、それを別の方法で送ってください。それは既にそこにあれば、すべてを変更しなくても結果を簡単に収集して更新することができなければなりません。

私が見つけたその他のほとんどは、角度1.5のものや、コントローラーとフィルターの作成、そしての代わりに#と使用されていたすべての種類の良いもの角2に適用します。私はいくつかのプレーンオールを使用したことを見てきましたdocument.getElementById()しかし、私はちょうどそれを行うことはできませんものの動的性質と。または私はできますか？助けてください。

Answer 1

だけ迅速な危険性：

<div radio-group [(ngModel)]="selectedAnswer" *ngFor="let answer of featureQuestion?.answers" class="col col-12 answer-row justify-content-center"> 

注：私はあなたが何をしたいと考えてい

は、おそらくそうようにしたり、ngForの上、ラジオ・グループディレクティブを使用しているあなたもお勧めしますこれらの変更を囲むdivに入れます。注意：NgModelは新しい変数にバインドされています。これは私がちょうど実現し、あなたは私は、これはまた

役に立てば幸い

 <input type="radio" 
      [attr.id] = "answer.id" 
      [attr.name] = "name" 
      [attr.value]= "answer.answer" <<<Here 
      hidden /> 

に設定した値を保持するために起こっている、あなたは、おそらく多くのradiogroupsをお勧めしますか？その場合は、代わりにngModelを値の配列にバインドしてください。