Data binding inside ngFor

387 views Asked by At

I am working on a project, where I am getting questions from backend with multiple options. Now in one of question type - Multi choice grid question, we are trying to create view like this

enter image description here

for that in the html, I have written this code,

<!-- 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>

In the change event I am just pushing particular question and selected option into an array.

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;
    }
  }

It works fine till now, but when I go to different question and come back again, I am facing an issue. When coming back to this question again, again I am creating one array by previously selected options and from that array I am checking If user has previously checked particular option or not.

/* 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;
  }

But I am getting this kind of response on my view -

enter image description here

I believe it's because form control is not unique, because even checkMultiChoiceGridSelectedOption function returns false for second question's "Question row 2" - "true" option but still It consider as true. Is there any other way to bind data inside ngFor? (ngModel also not working.)

Thanks in advance.

0

There are 0 answers