ngModel неправильно связывается с ng-for

Question

У меня есть запрос, который возвращает этот массив JSON:

{
    "questionId": 1,
    "questionContext": "Over the past two weeks, how often have you had little interest or pleasure in doing things?",
    "qReq": true,
    "qAnswerType": 2,
    "answerOptions": [
        {
            "answerId": 1,
            "answerContext": "Between 15-30 Days",
            "aOrdinal": 1,
            "isAnswer": false,
            "ngAnswerField": "Answer1"
        },
        {
            "answerId": 2,
            "answerContext": "Between 30-60 Days",
            "aOrdinal": 2,
            "isAnswer": false,
            "ngAnswerField": "Answer2"
        },
        {
            "answerId": 3,
            "answerContext": "Between 60-90 Days",
            "aOrdinal": 3,
            "isAnswer": false,
            "ngAnswerField": "Answer3"
        }
    ]
}

Я динамически заполняю форму в моем Angular компоненте, как показано ниже:

@Component({
  selector: 'app-survey-edit',
  templateUrl: './survey-edit.component.html',
  styleUrls: ['./survey-edit.component.css']
})
export class SurveyEditComponent implements OnInit {
  RadioModel: any = {};
  questionContext = '';
  answerOptions: any;
  ngOnInit() {
     this.surveyEditService.GetQADetail(this.currentQuestionOrdinal, this.surveyId).subscribe(question => {
        if (question) {
          console.log(question);
          this.questionContext = question.questionContext;
          this.answerOptions = question.answerOptions;
        }
      }, error => {
        // Server error
        this.alertify.error(error);
      });
   }
}

данные поступают, как и ожидалось, когда я делаю console.log, но проблема заключается в том, что эта форма создается динамически в html через ng-for

Вот мой шаблон html:

<code><form
              novalidate
              (ngSubmit)="SaveAnswer(RadioButtonForm)"
              #RadioButtonForm="ngForm"
              autocomplete="off">
                <fieldset>
                  <div class="form-group row">
                    <label class="col-md-2 col-form-label">Question {{currentQuestionOrdinal}}</label>
                    <div class="col-md-12">
                      <pre>{{ questionContext }}

{{answerOption.answerContext}} Предыдущая Следующая

Не могу понять, почему не работает ngModel или проверенное свойство. На самом деле страница отображается, но проблема в том, что форма (переключатели) ведет себя странно, а это означает, что когда вы выбираете одну кнопку-переключатель, она не позволяет выбрать другую ... привязка по какой-то причине не выполнена должным образом.

Answer 1

Ответ был немного сложным для меня. По существу, свойство [value] должно соответствовать значению для [(ngModel)], чтобы выбрать соответствующее значение, например, следующее:

<div class="custom-control custom-radio" *ngFor="let answerOption of answerOptions">
  <input
    type="radio"
    id="{{answerOption.ngAnswerId}}"
    name="customRadio"
    class="custom-control-input"
    [value]="answerOption.answerContext"
    (change)="onItemChange(answerOption)"
    [checked]="answerOption.isAnswer"
    ([ngModel])="answerOption.ngAnswerField">
  <label class="custom-control-label" for="{{answerOption.ngAnswerId}}">{{answerOption.answerContext}}</label>
</div> 

Мне пришлось обновить свой ответ JSON, чтобы как следующее:

"answerOptions": [
        {
            "answerId": 1,
            "answerContext": "Between 15-30 Days",
            "aOrdinal": 1,
            "isAnswer": false,
            "ngAnswerId": "Answer1",
            "ngAnswerField": "",
            "qaId": 1
        },
        {
            "answerId": 2,
            "answerContext": "Between 30-60 Days",
            "aOrdinal": 2,
            "isAnswer": true,
            "ngAnswerId": "Answer2",
            "ngAnswerField": "Between 30-60 Days",
            "qaId": 2
        },
        {
            "answerId": 3,
            "answerContext": "Between 60-90 Days",
            "aOrdinal": 3,
            "isAnswer": false,
            "ngAnswerId": "Answer3",
            "ngAnswerField": "",
            "qaId": 3
        }
    ]

Любые отзывы или замечания приветствуются.