Angular

Question

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

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 = {};

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

Answer 1

我不知道你的模型结构，但在你的项目中 *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>

希望对您有所帮助。

Answer 2

您正在使用该 ngFor 同一组件属性生成的所有不同搜索选项，"selectAnswer" 它只能包含一个布尔值，从而使所有其他选项发生变化。相反，要让您的代码正常工作，请尝试在您的组件中声明

public selectAnswer = {};

和

<div class="question-options" *ngFor="let item of search.options;let j = index">
    <div class="statement-row" [ngClass]="(selectAnswer[j] =='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[j] = 'true'">
            <i class="qitembox qclose-icon"></i>
          </div>
          <div class="qitem qtick" (click)="selectAnswer[j] 'false'">
            <i class="qitembox qtick-icon"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

这应该会如您所愿！还有其他解决方案，但您现在可以从这里获取它，它可以根据您的需要进行改进。

编辑： 为了让您的类在第一次更改之前不应用于您的容器，您可以向我们的 selectAnswer 对象添加一个新键：

<div class="question-options" *ngFor="let item of search.options;let j = index">
<div class="statement-row" [ngClass]="{'correct': selectAnswer[j]?.dirty && (answer[j].select == 'true'), 'wrong': selectAnswer[j]?.dirty && (answer[j].select == 'false')}">
  <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[j] = {select: 'true', dirty: 'true'};">
        <i class="qitembox qclose-icon"></i>
      </div>
      <div class="qitem qtick" (click)="selectAnswer[j] = {select: 'false', dirty: true};">
        <i class="qitembox qtick-icon"></i>
      </div>
    </div>
  </div>
</div>

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

Angular - ngClass already present before button click

dom-events

angular-directive