更改按鈕類上的角度4的事件

Question

我正在設計MCQ測試，我想要顯示選中的按鈕選項樣式爲綠色點擊它。 我已經準備好角度爲1的代碼，但無法將其轉換爲角度4。從角1 碼 -

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

守則角4

<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.實現請給一些想法。目前當我點擊一個按鈕時，所有選項樣式都變爲綠色。

Answer 1

那麼，在角1中，您當前正在保存您點擊的選項的ID，而在Angular 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>