Angular - 在选择所有选项之前禁用按钮

Question

我想禁用下一个按钮，直到所有语句都被选中，这意味着必须选择一个选项。我已经尝试过，但在选择所有选项后我一直坚持如何启用它？ 另外，如果我回去，它不应该显示禁用按钮。有什么帮助吗？ （已解决）

编辑： 我的应用现在有 2 个场景，2 个不同类型的问题。

第一种情况是 mcq 类型，其中只有一个选项可选。

第二种情况，T/F all option可以是真或假。

建议的解决方案有效，但我希望它基于 questionType 而不是 问题编号。因为后者不会是唯一的。 HTML

<div class="qitem qclose"
                   [ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}"
                   (click)="changeFalse(j , item, searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
                <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,searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
                <i class="qitembox qtick-icon">T</i>
              </div>

TS

setQuestionAnswer(i,option,step,answer){
    console.log(option,i);
    /*Update question status in options array*/ 
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){
        res.options.map(res=>{
          if(res.id === option.id){
            res.status = answer;
          }
        })
      }
    });
    /*-----------------------------*/ 
    console.log(this.QuizData);

   /*Calculate total values selected*/ 
    this.totalConditions(option, step);
  /*-----------------------------*/ 
  }

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

Answer 1

只需使用布尔值设置每个步骤的状态，并将答案状态的值添加为选项数组的真或假。您可以通过将 status 的新属性添加到包含来自 API 的数据的 QuizData 数组来做到这一点，如下所示：

this.QuizData.forEach(x=>{
  x['status'] = true;
  x.selectAnswer = { select: '', dirty: '' };
  x.options.map((x, index)=>{
    x['id'] = index;
    x['status'] = null;
  })
})

如果您注意到，我已将 ID 属性添加到用于获取已回答问题并更新其状态的每个字段，如下所示：

  changeTrue(i, option, step) {
    this.setQuestionAnswer(i, option, step, true);

    option.selectAnswer = { select: 'true', dirty: 'true' };
  }


  setQuestionAnswer(i,option,step){
    console.log(option,i);
    /*Update question status in options array*/ 
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){ //=====> matching the current step
        res.options.map(res=>{
          if(res.id === option.id){ // =======> matching the current question and setting it to true or false
            res.status = answer;
          }
        })
      }
    });
    /*-----------------------------*/ 
    console.log(this.QuizData);

   /*Calculate total values selected*/ 
    this.totalConditions(option, step);
  /*-----------------------------*/ 
  }

现在计算回答的问题总数

  totalConditions(option,step){
    this.count= 0;
    let len = 0;
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){
        len= res.options.length;
        res.options.map(res=>{
          if(res.status !== null){
            this.count = this.count +1;
          }
        })
      }
    });
    if(this.count ===len){  // If all all questions answered then remove disable from button
      this.QuizData.map(res=>{
        if(res.tfQuestionNumber === step){
          res.status = false;  
        }
      });
    }
  }

它已经完成了。您可以随意返回和前进，状态不会更改为禁用。希望对你有帮助:)

工作示例： https://stackblitz.com/edit/angular-ivy-quiz

场景 2：

如果您有 MCQ 选项，在这种情况下，您可以简单地将这段代码添加到切换方法（）。

toggle(step) { 
    this.buttonDisabled = false;

    this.QuizData.map(res=>{
      console.log(res.index,step);
      if(res.index === step){
        res.status = false; 
      }
    });
    console.log(this.QuizData); 

}

工作示例： https://stackblitz.com/edit/angular-ivy-quiz-mcqs

Answer 2

所以我认为您应该考虑使用反应式表单并在所有表单控件（每个问题都有一个）都脏时创建一个验证器。

我的第二个建议是遵循您编写的代码。每次您调用 changeFalse 或 changeTrue 时，您都会计算回答的数量，然后如果计数等于问题的数量，则相应地设置 this.buttonDisabled