1

我正在做一个项目,我从后端收到多个选项的问题。现在在其中一种问题类型 - 多选网格问题中,我们正在尝试创建这样的视图

在此处输入图像描述

为此,我在 html 中编写了这段代码,

<!-- Multi choice grid questions -->
          <div *ngIf="(quiz['quizObj']['questionType'] === questionType.MULTI_CHOICE_GRID)">
            <div *ngFor="let ques of quiz['quizObj']['questionArray']; let i=index">
              <span>{{ques['questionRow']}}</span>
              <mat-radio-group [formControl]="selectedMultiChoiceGridOption"
                               (change)="onChangeOption(ques)">
                <mat-radio-button class="example-radio-button"
                                  *ngFor="let option of quiz['quizObj']['options']"
                                  [value]="option" [checked]="checkMultiChoiceGridSelectedOption(option, ques)">
                  {{option.option}}
                </mat-radio-button>
              </mat-radio-group>
            </div>
          </div>

在更改事件中,我只是将特定问题和选定选项推送到数组中。

multiChoiceGridAnswers = [];
selectedMultiChoiceGridOption = new FormControl();
/* Multi choice grid question event - on change or on selecting any option */
  onChangeOption(quesRow: any) {
    const params = {
      questionRow: quesRow,
      selection: this.selectedMultiChoiceGridOption.value
    };
    const index = this.multiChoiceGridAnswers.findIndex((question) => {
      return (quesRow['questionRowId'] === question['questionRow']['questionRowId']);
    });
    if (index === -1) {
      this.multiChoiceGridAnswers.push(params);
    } else {
      this.multiChoiceGridAnswers[index] = params;
    }
  }

到目前为止它工作正常,但是当我去不同的问题并再次回来时,我遇到了一个问题。再次回到这个问题时,我再次通过先前选择的选项创建一个数组,并从该数组中检查用户是否以前检查过特定选项。

/* In the Multi choice grid question type, getting status if particular option is previously selected */
  checkMultiChoiceGridSelectedOption(option: any, ques: any) {
    let isSelected = false;
    if (this.multiChoiceGridAnswers.length > 0) {
      this.multiChoiceGridAnswers.filter((answerData) => {
        if ((answerData['questionRow']['questionRowId'] === ques['questionRowId'])) {
          if (answerData['selection'] && (answerData['selection']['optionId'] === option['optionId'])) {
            isSelected = true;
          }
        }
      });
    }
    return isSelected;
  }

但在我看来,我得到了这样的回应——

在此处输入图像描述

我相信这是因为表单控件不是唯一的,因为即使 checkMultiChoiceGridSelectedOption 函数对于第二个问题的“问题第 2 行”-“真”选项也返回假,但它仍然认为是真。还有其他方法可以在 ngFor 中绑定数据吗?(ngModel 也不起作用。)

提前致谢。

4

0 回答 0