Angular

Question

在这个应用程序中，在每个问题中，我有 4 个陈述，在这些陈述中，True 或 False 都可以是正确的答案，这很好用。但是，当我单击下一条语句时，它会从之前 selected 元素中删除 class 。我想 select 任何语句的真或假，当我单击下一个语句的按钮时，它应该保持其活动状态。我有什么办法可以处理？我正在使用 ID，所以我想不出任何解决方法。请任何帮助或建议..

工作 Stackblitz 演示： https://stackblitz.com/edit/angular-ivy-4yczgp

<div class="statement-row"
                               *ngFor="let item of qblock.options;let j = index"
                               [class.correct-answer]="item.id == id && right"
                               [class.wrong-answer]="item.id == id && wrong"
                               >
                               <!-- [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">
                                <div class="qitem" [class.green-class-right]="highlight_false_green && item.id == id" [class.red-class-wrong]="highlight_false_red  && item.id == id"
                                        (click)="clickFalse(item)">
                                  <i class="qitembox qclose-icon"></i>
                                </div>
                                <div class="qitem" [class.green-class-right]="highlight_true_green  && item.id == id" [class.red-class-wrong]="highlight_true_red  && item.id == id"
                                (click)="clickTrue(item)">

                                  <i class="qitembox qtick-icon"></i>
                                </div>
                              </div>
                            </div>
                            <div class="correct-statement">
                              <span class="true-statement">This statment is True</span>
                              <span class="false-statement">This statment is False</span>
                              <em class="wrong-answer-description">
                                {{item.explanation}}
                              </em>
                              <em class="correct-answer-description">
                                {{item.explanation}}
                              </em>
                            </div>

                          </div>

Answer 1

我重新设计了组件，所以我认为它可以如您所愿地工作。您可以在此处找到代码：https://stackblitz.com/edit/angular-ivy-pctp7z

如果您还有其他问题，请随时向他们提问。描述所有代码更改有点困难。希望对您有所帮助！

Angular - 无法保持活跃 class

Angular - unable to maintain active class

javascript

click

dom-events

angular-directive