angular - 在 Angular 4 中更改事件的按钮类

Question

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

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

同样我想通过angular 4实现。请提供一些想法。目前，当我单击一个按钮时，所有选项样式都会变为绿色。

Answer 1

好吧，在 Angular 1 中，您当前正在保存您单击的选项的 ID，而在 Angular 4 中，您正在更改所有按钮共享的公共(public)变量。

为什么不像你在 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;
}