如何在 Angular 反应形式的 mat-checkbox 或 mat-radio-button 之间切换？

Question

我正在创建一个测验应用程序，需要在 mat-checkbox 或 mat-radio-button 之间切换，具体取决于问题是否有一个或多个答案。问题 #1 是单选答案问题，使用 mat-radio-button 显示，而问题 #2 是多选问题，但也使用 mat-radio-button 而不是 mat-checkbox 显示。

这是我的模板的样子：

<form [formGroup]="formGroup">
    <ol *ngIf="multipleAnswer === false">
        // using mat-radio-buttons here 
    </ol>
    <ol *ngIf="multipleAnswer === true">
        // using mat-checkboxes here
    </ol>
</form>

在我的 ts 文件中，逻辑如下：

multipleAnswer: boolean;

ngOnInit() {
  this.multipleAnswer = this.quizService.getQuestionType();
}

ngOnChanges(changes: SimpleChanges) {
  if (changes.question) {
    switch (this.question.type) {
      case 'SINGLE_CHOICE':
        this.formGroup = new FormGroup({
          answer: new FormControl([null, Validators.required])
        });
        break;
      case 'MULTIPLE_CHOICE':
        const multipleChoiceValidator = (control: AbstractControl) =>
          control.value.reduce(
            (valid: boolean, currentValue: boolean) => valid || currentValue
            , false
          ) ? null : {answers: 'At least one answer needs to be checked!'};
        this.formGroup = new FormGroup({
          answers: this.formBuilder.array(this.question.shuffledAnswers
              .map((answer: string) => this.formBuilder.control(false)),
            multipleChoiceValidator
          ),
        });
        break;
    }
  }
}

不需要 shuffledAnswers，问题类型应该从 assets/quiz.ts 文件中推断出来（不需要硬编码问题类型），答案应该是数字，而不是字符串

在我的 QuizService 中：

getQuestionType(): boolean {
  return (this.correctAnswers && this.correctAnswers.length === 1);
}

Answer 1

有几个问题。首先，仅在 ngOnInit 内部调用 multipleAnswer 会在开始时仅设置此布尔变量一次，它应该在 ngOnChanges 内部。

但这不是这里唯一的问题，主要问题在于您的QuizService。在这里，您使用this.quizService.getQuestionType(); 方法设置multipleAnswer true 或false，但在QuizService 的getQuestionType() 方法中，您正在检查this.correctAnswers 是否已设置并且元素长度为1，但this.correctAnswers 在您调用它时始终为空。

另一个问题是你的ngOnChanges 你有switch (this.question.type) 这里this.question 似乎永远是未定义的。

像下面这样编辑您的代码，并在每次出现问题时检查控制台输出。

添加一个从问题中获取correctAnswers 的新方法。

getCorrectAnswers(question:QuizQuestion){
   return question.options.filter((item)=> item.correct);
}

并像下面这样编辑 ngOnChanges 的开头，我还添加了一个控制台输出，以便您可以从上面的新方法中看到数据。

ngOnChanges(changes: SimpleChanges) {   
   if (changes.question && changes.question.currentValue !== changes.question.firstChange){
     this.currentQuestion = changes.question.currentValue;
     this.correctAnswers = this.getCorrectAnswers(this.currentQuestion);
     this.multipleAnswer = this.correctAnswers.length > 1 ? true : false;
     console.log('correct ans: ', this.correctAnswers);
     ...

我无法修改所有代码，因为您的代码背后有自己的逻辑，但我更新了答案，以便在“ngOnChanges”中正确设置与此问题相关的变量。