Angular - 无法保持活动 class

Question

在这个应用程序中，在每个问题中，我都有 4 个陈述，在这些陈述中，真或假都可以是正确答案，这很好。 但是当我单击下一条语句时，它会从先前选择的元素中删除 class 。 我想 select 从任何语句中判断为真或假，当我单击下一个语句的按钮时，它应该保持其活动 state 。 我有什么办法可以处理？ 我正在使用 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

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