角度4のイベントのボタンクラスを変更する

Question

私はMCQテストを設計しています。クリックして選択されたボタンオプションのスタイルを緑色に表示したいと思います。 私は角度1の準備ができていますが、角度4に変換することはできません。 コードアンギュラ1から - 角度4で

<div class="row"> 
           <table> 
            <tr ng-repeat="option in question_option.options" class="mtq_clickable col-md-6 col-sm-6"> 
             <td class="mtq_letter_button_td"> 
              <div ng-class="{mtq_css_letter_selected : option.id == question_option.selectedAns}" ng-click="clicked($index+1)" class="mtq_css_letter_button" alt="Question 1, Choice 1">{{option.character}}</div> 
             </td> 
             <td class="mtq_answer_td"><label class="divlabel">{{option.text}}</label></td> 
            </tr> 
           </table> 
          </div> 
        </div>   

コード

同じ

<table> 
          <tr *ngFor="let options of currentquiz.options" class="mtq_clickable col-md-6 col-sm-6"> 
           <td class="mtq_letter_button_td"> 

            <div [ngClass]="{'mtq_css_letter_button': !clicked, 'mtq_css_letter_selected': clicked}" (click)="clicked = true" alt="Question 1, Choice 1">{{options.renderingtext}}</div> 
           </td> 
           <td class="mtq_answer_td">{{options.text}}</td> 
          </tr> 

私は角4を介して達成したいいくつかのアイデアを教えてください。現在、1つのボタンをクリックすると、すべてのオプションスタイルが緑色に変わります。

Answer 1

角度1では、クリックしたオプションのIDを現在保存しています。角度4では、すべてのボタンが共有している共通変数を変更しています。

なぜあなたはangularjsでやっていることをやっていないのですか？これはNG-クラスのオプションのクラス/インタフェースで

<tr *ngFor="let options of currentquiz.options" class="mtq_clickable col-md-6 col-sm-6"> 
    <td class="mtq_letter_button_td"> 
     <div [ngClass]="{clicked(option.id) ? 'mtq_css_letter_selected': 'mtq_css_letter_button'}" (click)="click(option.id)" alt="Question 1, Choice 1">{{options.renderingtext}}</div> 
    </td> 
    <td class="mtq_answer_td">{{options.text}}</td> 
</tr> 

そして、あなたのcomponent.tsで

public clickedId : number; 

click(id: number) { 
    this.clickedId = id; 
} 

clicked(id: number): boolean { 
    return this.clickedId === id; 
} 

Answer 2

で三項演算子を用いた超高速のアプローチであり、クリックされた変数を追加します。そして、このようなHTMLを変更：

<table> 
    <tr *ngFor="let options of currentquiz.options" 
    class="mtq_clickable col-md-6 col-sm-6"> 
     <td class="mtq_letter_button_td"> 
      <div [ngClass]="{'mtq_css_letter_button': !options.clicked, 'mtq_css_letter_selected': options.clicked}" 
      (click)="options.clicked = true" 
      alt="Question 1, Choice 1">{{options.renderingtext}}</div> 
     </td> 
     <td class="mtq_answer_td">{{options.text}}</td> 
    </tr> 
</table>