Question

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

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

这是另一种方式。

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

查看stackblitz

角度-在单击按钮时切换两个类别

2 个答案: