Angular 8 - двусторонняя привязка данных, нулевые значения

Question

У меня проблема с двухсторонней привязкой данных и Angular 8

. В следующем примере моя модель (service.formData) заполнена, но одна из переменных (которая на самом деле является дочерней) table) имеет значение null (service.formData.ProjectSshaspModel) Если я заполняю данные в базе данных, двусторонняя привязка, кажется, работает нормально, извлекает и передает данные обратно. Но когда переменная равна нулю, когда страница загружается, и я заполняю модель (HTML страница), кажется, что объект не заполняется

Я поместил оба HMTL, Angular Двусторонние данные привязка и JSON значения ниже. Пожалуйста, помогите, если это возможно. Спасибо

 <form #form="ngForm" autocomplete="off" (submit)="OnSubmit(form)" *ngIf="service.formData">
  <div class="row" id="section1">
    <div class="col-md-10">

      <input type="hidden" name="ProjectID" #ProjectID="ngModel" [(ngModel)]="service.formData.ProjectID" />
      <input type="hidden" name="ProjectSshaspModel.ProjectSshaspID" #ProjectSshaspModel.ProjectSshaspID="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel.ProjectSshaspID" />
        <input type="radio" id="not-required"
               name="CompanyLogoRequired" #ProjectSshaspModel.CompanyLogoRequired="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired" ng-checked="(CompanyLogoRequired==0)" [value]="0" />
        Not Required
        &nbsp;
        <input type="radio" id="incorporate"
               name="CompanyLogoRequired" #ProjectSshaspModel.CompanyLogoRequired="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired" ng-checked="(CompanyLogoRequired==1)" [value]="1" />
        Incorporate


{
"projectModel": {
    "ProjectSshaspModel": null,
    "ProjectID": "a9400d92-de37-4c00-957e-08d7bbd4b4c5",
    "ProjectNumber": "2020-1233",
    "Consultant": "Joe Test",
    "AssignedDate": "2020-02-28T00:00:00",
    "ClientDueDate": "2020-02-29T00:00:00",
    "ProjectCreationDate": "2020-02-28T00:00:00",
    "ScopeOfWork": "Scope of work",
    "Service": 0,
    "ClientName": "Ebay",
    "CompanyContact": "John Smith",
    "CompanyContactPhone": "555-555-5555",
    "CompanyContactEmail": "jsmith@comcast.net",
    "CompanyAddress": "123 Sesame Place Test, JN 01111",
    "CompanyType": 2
}

}

Answer 1

Предположим, ваш ngModel определен с переменной service.formData.ProjectSshaspModel.ProjectSshaspID, тогда требуется, чтобы только последняя переменная была нулевой, предыдущие свойства не могут быть null (в этом случае ProjectSshaspID может быть только null. Поэтому я предложил бы инициализировать переменную во время инициализации компонента, как показано ниже.

service.ts

this.formData.ProjectSshaspModel = {};

Также, почему ваш ngModel неправильно определен с двумя переменными.

[(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired"

ngModel требуется только одна переменная для обновления, поэтому измените ее на одну переменную

[(ngModel)]="service.formData.ProjectSshaspModel.CompanyLogoRequired"