更改angular 4中事件的按钮类

我设计的MCQ测试，我想显示选定的按钮选项样式绿色点击它。 我已经准备好angular 1中的代码，但无法将其转换为angular 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>        

{{option.character}
{{option.text}

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

{{options.renderingtext}
{{options.text}

---

同样的，我想通过第四章来实现。请给出一些想法。当前，当我单击一个按钮时，所有选项的样式都变为绿色。

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

---

在选项类/界面中，单击添加变量。然后按如下方式更改html：

{{options.renderingtext}
{{options.text}

---

它可以一个接一个地选择所有选项我只想选择1您需要输入。以下链接将帮助您：

public clickedId : number;

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

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

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