Angular

Question

我有这个测验应用程序，True/False 个问题中的语句和针对每个语句的 T 和 F 按钮。当我 select 选项并单击 next/back 按钮时，活动 class 将从上一个选项中删除。因为我是初学者，所以我想不出我做错了什么。有什么帮助吗？

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

<div class="qitem qclose"
    [ngClass]="{'qclose-active': selectAnswer[j]?.dirty && (selectAnswer[j].select == 'false')}"
    (click)="changeFalse(j , item)">
     <i class="qitembox qclose-icon"></i>
</div>
<div class="qitem qtick"
    [ngClass]="{'qtick-active': selectAnswer[j]?.dirty && (selectAnswer[j].select == 'true')}"
    (click)="changeTrue(j , item)">
    <i class="qitembox qtick-icon"></i>
</div>

Answer 1

您需要将该对象分配给非通用模型 Demo

你的分配函数

changeFalse(i, option) {
    console.log(option.id);
    option.selectAnswer = { select: 'false', dirty: 'true' };
}

changeTrue(i, option) {
    console.log(option.id);
    option.selectAnswer= { select: 'true', dirty: 'true' };
}

你的html

<div class="ccq">
    <div class="qitem qclose" [ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}" (click)="changeFalse(j , item)">
         <i class="qitembox qclose-icon">F</i>
    </div>
    <div class="qitem qtick" [ngClass]="{'qtick-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'true')}"(click)="changeTrue(j , item)">
        <i class="qitembox qtick-icon">T</i>
    </div>
</div>

Angular - 下一步和后退按钮的活动状态被移除

Angular - Active state gets removed on next and back button

javascript

dom

typescript

angular-directive