我正在做一个项目,我从后端收到多个选项的问题。现在在其中一种问题类型 - 多选网格问题中,我们正在尝试创建这样的视图
为此,我在 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 也不起作用。)
提前致谢。