Angular问题：点击上/下一题按钮后选中状态丢失

嗨，作为Angular初学者碰到这种状态保存的问题真的太常见啦！我来帮你分析下问题所在，然后一步步解决～

问题根源分析 #

从你给出的代码片段来看，你是用selectAnswer[j]来跟踪每个选项的选中状态，但切换上下题时，之前选中元素的active类消失，大概率是因为：

• selectAnswer没有按题目列表的长度正确初始化，导致切换题目时索引对应错误
• 切换题目时，selectAnswer的状态没有被持久化保存，或者当前索引j没有对应到题目在全局列表中的真实位置

具体解决方案 #

1. 正确初始化状态数组 #

首先在组件的ngOnInit方法里，根据你的题目列表初始化selectAnswer数组，让每个题目都有独立的状态对象：

// 假设你的题目数据存在questions数组中
ngOnInit() {
  // 为每个题目初始化状态：未选中（select为null）、未修改（dirty为false）
  this.selectAnswer = this.questions.map(() => ({
    select: null,
    dirty: false
  }));
}

2. 确保模板中的索引对应全局题目位置 #

在模板遍历题目时，一定要用let j = index拿到每个题目在全局列表中的真实索引，而不是当前显示的相对位置：

<!-- 假设currentQuestionIndex是当前显示的题目索引 -->
<div *ngFor="let item of questions; let j = index" 
     [hidden]="j !== currentQuestionIndex">
  <!-- 错误选项按钮 -->
  <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>
</div>

3. 完善状态更新方法 #

修改changeFalse和changeTrue方法，确保点击选项时，更新对应索引的状态：

changeFalse(j: number, item: any) {
  // 更新对应题目状态：选中错误选项，标记为已修改
  this.selectAnswer[j] = {
    select: 'false',
    dirty: true
  };
}

changeTrue(j: number, item: any) {
  // 更新对应题目状态：选中正确选项，标记为已修改
  this.selectAnswer[j] = {
    select: 'true',
    dirty: true
  };
}

4. 切换题目时仅更新当前显示索引 #

点击上一题/下一题按钮时，只需要修改currentQuestionIndex的值，不要重置或修改selectAnswer数组：

// 下一题
nextQuestion() {
  if (this.currentQuestionIndex < this.questions.length - 1) {
    this.currentQuestionIndex++;
  }
}

// 上一题
prevQuestion() {
  if (this.currentQuestionIndex > 0) {
    this.currentQuestionIndex--;
  }
}

为什么这样能解决问题？ #

每个题目都对应selectAnswer数组里的一个固定位置，切换题目时只是改变了要显示的题目索引，之前所有题目的选中状态都被保存在数组里。当回到之前的题目时，模板会根据对应索引的selectAnswer状态，正确渲染active类啦～

内容的提问来源于stack exchange，提问作者Kenny.k