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

Question

我是 angular 的初学者，我正在尝试解决无法在单击按钮时切换 class 的问题。 这是一个测验应用程序，在 true/false 问题格式中有 4 个语句和 2 个按钮来标记勾号或交叉，但可以使用一个活动的 class （真或假）。现在，我使用的逻辑不会在单击其他按钮时删除其他 class。任何帮助，将不胜感激。 工作堆栈闪电战演示： 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>

Answer 1

您的问题是您对 ngClass 和 eacj 使用了多个不相关的条件，点击您使该条件正确。所以你使两个条件正确。这就是为什么你不能改变。

点击时需要再初始化一个

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

Answer 2

这是另一种方法。

1. 您设置了项目的class。
2. 如果 wrong-answer 将应用 class，如果 correct-answer 将应用 class。
3. 您在各自的按钮上设置 item.class = 'wrong-answer' or item.class='correct-answer'。

查看stackblitz