* ngForループ内の1つのチェックボックス（ラジオボタンの動作）をチェックする

Question

私はQuizzモジュールをAngular2で開発しましたので、提案された回答だけで、をチェックする必要があります。答えがあります。状況が、私はそれがラジオボタンの動作とチェックボックスにしたい、問題は私が仕事の一部をしたが、*ngForループの中でより複雑なので、一度私はB - 質問の答えをチェックしてA - 答えはチェックされなくなります。 は、ここに私のHTMLです：

<div *ngFor="#qt of listQuestion"><h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3> 

      <div class="uk-accordion-content"> 

    <input type="checkbox" class="cb" id="0" [(ngModel)]="qt.chp[0]" onchange="cbChange(this)" /> 

    <label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br><br> 

    <input type="checkbox" class="cb" id="1" [(ngModel)]="qt.chp[1]" onchange="cbChange(this)" /> 

    <label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br><br> 

    <input type="checkbox" class="cb" id="2" [(ngModel)]="qt.chp[2]" onchange="cbChange(this)"/> 

    <label for="2" class="inline-label"> <b>{{qt.lpo[2]}}</b></label><br><br> 

    <input type="checkbox" class="cb" id="3" [(ngModel)]="qt.chp[3]" onchange="cbChange(this)"/> 

    <label for="3" class="inline-label"><b>{{qt.lpo[3]}}</b></label> 

           </div></div> 

そして、ここでスクリプトがソロ・チェックの方法で行うことです：あなたは質問のリストをロードする*ngForループで見ることができるように

<script> 
    function cbChange(obj) { 
    var cbs = document.getElementsByClassName("cb"); 
    for (var i = 0; i < cbs.length; i++) { 
     cbs[i].checked = false; 
    } 
    obj.checked = true; 
    } 
</script> 

を。すべての質問には命題リスト（lpo[i]）があり、[(ngModel)]="qt.chp[i]"はすべての命題（チェックされた命題）のステータスを取得するためのものです。私はすべてのonchange関数を（インデックスにあるように）一意のngModelに参照する必要があります。ノーハウ。助けてください？ （ここでは、状況の実像がある）あなたの状況で

Answer 1

、唯一の答えは各質問のために選択されなければならないので、私はあなたが選択を示すために、解答レベルでブールフィールドを使用しないことをお勧め。むしろ、選択した回答を質問レベルで保存する必要があります。このような何か：将来的には

class Question { 
    wording: string; 
    answers: string[]; 

    selectedAnswer: string; 

    selectAnswer(ans: string) { 
     this.selectedAnswer = ans; 
    } 
} 

、あなたは簡単に、必要に応じて複数の選択に応えるためにselectedAnswerプロパティとselectAnswer機能の実装を変更することができます。あなたが見えるようにHTMLのラジオボタンのスタイルを設定することができます[：この時 http://plnkr.co/edit/xMTtFp31rU2ZqCtV8JO1?p=preview