时间戳

首页 > 解决方案 > Angular - ngClass 在按钮单击之前已经存在

angular - Angular - ngClass 在按钮单击之前已经存在

问题描述

现在发生的问题，由于我输入的条件，当我加载页面时已经存在正确的类，它找到selectAnswer = false并将正确的类放在父级中。有没有办法解决这个问题？

HTML

<div class="question-options" *ngFor="let item of search.options;let j = index">
        <div class="statement-row" [ngClass]="(selectAnswer =='true')?'wrong':'correct'">
          <div class="statement-question">
            <div class="qitem-text">
              <div class="qitem-textbox">
                <p>{{item.statement}}</p>
              </div>
            </div>
            <div class="ccq">
              <div class="qitem qclose" (click)="selectAnswer = 'true'">
                <i class="qitembox qclose-icon"></i>
              </div>
              <div class="qitem qtick" (click)="selectAnswer = 'false'">
                <i class="qitembox qtick-icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

TS

  public selectAnswer = {};

在这种情况下，我不知道如何管理状态。任何帮助都会很棒。谢谢！

标签： angulardom-eventsangular-directive

解决方案

我不知道您的模型结构，但在您的项目中*ngFor

*ngFor="let item of search.options

该项目应具有属性selectAnswer，例如 

item.selectAnswer

那么你的代码如下所示

<div class="question-options" *ngFor="let item of search.options;let j = index">
  <div class="statement-row" [ngClass]="(item.selectAnswer =='true')?'wrong':'correct'">
    <div class="statement-question">
      <div class="qitem-text">
        <div class="qitem-textbox">
          <p>{{item.statement}}</p>
        </div>
      </div>
      <div class="ccq">
        <div class="qitem qclose" (click)="item.selectAnswer = 'true'">
          <i class="qitembox qclose-icon"></i>
        </div>
        <div class="qitem qtick" (click)="item.selectAnswer = 'false'">
          <i class="qitembox qtick-icon"></i>
        </div>
      </div>
    </div>
  </div>
</div>

希望这会帮助你。

推荐阅读