Angular - 在按钮点击时切换两个类答案

【问题标题】：Angular - toggle two classes on button clicksAngular - 在按钮点击时切换两个类
【发布时间】：2020-06-11 12:06:10
【问题描述】：

我是 Angular 的初学者，我正在尝试解决一个问题，即我无法在按钮点击时切换课程。这是一个测验应用程序，在真/假问题格式中，有 4 个语句和 2 个按钮来标记勾选或交叉，但可以使用一个活动类（真或假）。现在，我使用的逻辑不会在单击其他按钮时删除其他类。任何帮助，将不胜感激。 工作栈闪电战演示： https://stackblitz.com/edit/angular-ivy-4yczgp

component.html

<div class="statement-row"
             *ngFor="let item of qblock.options;let j = index"
             [ngClass]="{'wrong-answer': item.selectedIndex === j,'correct-answer':item.customIndex === j}">
          <div class="statement-question">
            <div class="qitem-text">
              <div class="qitem-textbox">
                <p>{{item.statement}}</p>
              </div>
            </div>
            <div class="ccq">
              <button class="qitem qclose"
                   (click)="item.selectedIndex=j">
                <i class="qitembox qclose-icon"></i>
              </button>
              <button class="qitem qtick"
                   (click)="item.customIndex=j">
                <i class="qitembox qtick-icon"></i>
              </button>
            </div>
          </div>
        </div>

【问题讨论】：

标签： angular dom-events angular-directive

【解决方案1】：

您的问题是您对 ngClass 使用了多个不相关的条件，并且每次单击您都会使该条件正确。所以你使两个条件正确。这就是为什么你不能改变。

点击时需要再初始化一个

<button class="qitem qclose"
   (click)="item.selectedIndex=j;item.customIndex=null">
   <i class="qitembox qclose-icon"></i>
 </button>
 <button class="qitem qtick"
     (click)="item.customIndex=j;item.selectedIndex=null">
     <i class="qitembox qtick-icon"></i>
 </button>

【讨论】：

【解决方案2】：

这是另一种方式。

您设置了项目的类别。
如果是wrong-answer，则应用该类，如果是correct-answer，则应用该类。
您在各个按钮上设置了item.class = 'wrong-answer' or item.class='correct-answer'。

请参阅stackblitz

【讨论】：