Angular 8-双向数据绑定，空值答案

【问题标题】：Angular 8- two way data binding, null valuesAngular 8-双向数据绑定，空值
【发布时间】：2020-03-25 01:30:23
【问题描述】：

我遇到了双向数据绑定和 Angular 8 的问题

在以下示例中，我的模型 (service.formData) 已填充，但其中一个变量（实际上是子表）为 null(service.formData.ProjectShaspModel) 如果我在数据库中填充数据，则两种方式的绑定似乎可以正常工作并检索并传回数据。但是当页面加载时变量为 null 并且我填充模型（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
}

}

【问题讨论】：

开发工具控制台上没有错误？
chrome 调试没有错误。 JSON 看起来就像在上面的帖子中所做的那样，而当我在 DB 中预先填充表时，它的填充量已经完全填充了

标签： angular 2-way-object-databinding

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

【讨论】：

this.formData.ProjectSshaspModel = {};让我走上了正确的道路。因为数据库中没有行，所以实际属性为空，必须实例化。谢谢！