ngModel 没有与 ng-for 正确绑定答案

【问题标题】：ngModel is not binding properly with ng-forngModel 没有与 ng-for 正确绑定
【发布时间】：2020-03-05 15:52:34
【问题描述】：

我有一个返回这个 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 时，数据按预期出现，但问题是通过 ng-for 在 html 中动态创建此表单

这是我的 html 模板：

<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 }}</pre>
                    </div>
                  </div>
                  <div class="form-group row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <div class="custom-control custom-radio" *ngFor="let answerOption of answerOptions">
                          <input
                            type="radio"
                            id="customRadio{{answerOption.aOrdinal}}"
                            name="RadioModel.customRadio"
                            class="custom-control-input"
                            checked="{{answerOption.isAnswer}}"
                            [(ngModel)]="answerOption.isAnswer">
                          <label class="custom-control-label" for="customRadio{{answerOption.aOrdinal}}">{{answerOption.answerContext}}</label>
                        </div>
                      </div>
                    </div>
                  </div>
                   <div class="row">
                    <div class="col-md-4">
                      <button class="btn btn-secondary mr-3"
                              type="submit"
                              [disabled]="!RadioButtonForm.valid">
                        Previous
                      </button>
                      <button class="btn btn-secondary"
                              type="submit"
                              [disabled]="!RadioButtonForm.valid">
                        Next
                      </button>
                    </div>
                  </div>
                 </fieldset>

        </form>

我似乎无法理解为什么 ngModel 或 checked 属性不起作用。实际上页面正在显示，但问题是表单（单选按钮）表现得很奇怪，这意味着当您选择一个单选按钮时，它不会让您选择另一个......由于某种原因绑定没有正确完成。

【问题讨论】：

我认为ngModel 也必须绑定一个布尔值
@MedaiP90，你的意思是通过 [ngClass]
这个表单应该填充单选按钮，如果用户在没有选择单选按钮的情况下遗漏了问题，那么它不应该让用户继续
等一下...RadioModel.answerOption.ngAnswerField 的值是多少？
RadioModel 在组件中定义为任何类型。 answerOption.ngAnswerField 是返回的实际值

标签： angular

【解决方案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
        }
    ]

感谢任何反馈或说明。

【讨论】：