Rest 无法读取angular 2中记录编辑表单中未定义的属性

我的编辑表单中存在未定义属性的问题。我有一个API，允许我创建和更新客户。问题是，某些嵌套属性是可选的，在创建或编辑已经存在的字段时这是可以的，但在编辑客户上的一个嵌套字段时，我不知道该怎么做，该客户不是使用这些字段创建的，并且不断出现无法读取属性未定义的错误

这是我的客户对象：

export class Customer { 
  CompanyName: string;
  DisplayName: string;
  FamilyName: string; 
  GivenName: string;
  Id: number;
  Title: string;
  BillAddr: BillAddress;
  ShipAddr: ShipAddress;
  PrimaryPhone:  PrimaryPhoneNumber;
  Mobile: MobileNumber;
  PrimaryEmailAddr: PrimaryEmailAddress;
 }


  export class ShipAddress {
   City: string;
   Country: string;
   CountrySubDivisionCode: string; 
   Line1: string;
   Line2: string; 
   Line3: string; 
   Line4: string; 
   Line5: string; 
   PostalCode:string;
 }

   export class BillAddress {
   City: string;
   Country: string;
   CountrySubDivisionCode: string; 
   Line1: string;
   Line2: string; 
   Line3: string; 
   Line4: string; 
   Line5: string; 
   PostalCode:string;
 }

  export class PrimaryPhoneNumber {
    FreeFormNumber: number;
  }

  export class MobileNumber {
    FreeFormNumber: number;
  }

  export class PrimaryEmailAddress {
    Address: string; 
  }

这是编辑组件中的html：

<h1 class="page-header">Edit Customer</h1>
<div [ngBusy]="busy"></div>
<form (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6">
<h3>Customer information</h3>
<div class="form-group">
    <label for="customertitle">Title</label>
    <input type="text" class="form-control" id="cutomertitle" placeholder="Title" name="title" [(ngModel)]="customer && customer.Title" >
</div>
<div class="form-group">
    <label for="customerGivenName">First Name</label>
    <input type="text" class="form-control" id="customerGivenName" placeholder="First Name" name="givenname" [(ngModel)]="customer && customer.GivenName" >
</div>
<div class="form-group">
    <label for="customerFamilyName">Last Name</label>
    <input type="text" class="form-control" id="customerFamilyName" placeholder="Surname" name="familyname" [(ngModel)]="customer && customer.FamilyName" >
</div>
<div class="form-group">
    <label for="customerEmailAddress">Email Address</label>
    <input type="text" class="form-control" id="customerEmailAddress" placeholder="Email" name="email" [(ngModel)]="customer && customer.PrimaryEmailAddr.Address" >
</div>
<div class="form-group">
    <label for="customerPhone">Phone</label>
    <input type="text" class="form-control" id="customerPhone" placeholder="Phone Number" name="primaryphone" [(ngModel)]="customer && customer.PrimaryPhone.FreeFormNumber" >
</div>
<div class="form-group">
    <label for="customerMobile">Mobile</label>
    <input type="text" class="form-control" id="customerMobile" placeholder="Mobile Number" name="mobile" [(ngModel)]="customer && customer.Mobile.FreeFormNumber" >
</div>
</div>

<div class="col-md-6">
<h3>Address:</h3>
<div class="form-group">
    <label for="customerLine1">Line 1</label>
    <input type="text" class="form-control" id="cutomerLine1" placeholder="Line 1" name="line1" [(ngModel)]="customer && customer.BillAddr.Line1" >
</div>
<div class="form-group">
    <label for="customerLine1">Line 2</label>
    <input type="text" class="form-control" id="cutomerLine2" placeholder="Password" name="line2" [(ngModel)]="customer && customer.BillAddr.Line2" >
</div>
<div class="form-group">
    <label for="customerLine1">Line 3</label>
    <input type="text" class="form-control" id="cutomerLine3" placeholder="Password" name="line3" [(ngModel)]="customer && customer.BillAddr.Line3" >
</div>
<div class="form-group">
    <label for="customerCity">City</label>
    <input type="text" class="form-control" id="customerCity" placeholder="Password" name="city" [(ngModel)]="customer && customer.BillAddr.City" >
</div><div class="form-group">
    <label for="customerLine1">State/Province</label>
    <input type="text" class="form-control" id="cutomerLine1" placeholder="Password" name="Province" [(ngModel)]="customer && customer.BillAddr.CountrySubDivisionCode" >
</div>
<div class="form-group">
    <label for="customerLine1">Postal Code</label>
    <input type="text" class="form-control" id="cutomerLine1" placeholder="Password" name="postcode" [(ngModel)]="customer && customer.BillAddr.PostalCode" >
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Save Changes</button>
</form>

---

第一个问题是数据是异步的，因此在所有字段上呈现视图时，

customer

将是

undefined

。第二个问题是，由于某些字段没有值，因此也会抛出错误

通常，只需初始化

客户

，即可解决此问题：

customer = {};

但这里的问题是，尽管如此，您仍有一些更深层次的属性路径会抛出错误，例如：

customer.BillAddr.Line3

。当然，您可以初始化对象中的所有属性，但这对我来说太难看了

所有这些都可以通过解决。不幸的是，双向绑定，即

[（ngModel）]

不允许安全导航操作员

但是

[（ngModel）]=“某物”

等于以下各项：

[ngModel]="something" (ngModelChange)="changeHappened($event)"

单向绑定不支持安全导航操作员。因此，接下来可以做的是使用三元运算符，它捕捉用户所做的输入，并使用

customer.Title=$event

将其分配给变量（在本例中）。通过使用三元运算符，您可以通过向字段应用空字符串来消除最初没有值时出现的错误

undefined

：

[ngModel]="customer?.Title" 
(ngModelChange)="customer?.Title ? customer.Title = $event : ''"

（所有的功劳都归于这个答案：）

我还建议在这里使用一个模型驱动的表单，您可以将所有字段最初设置为空，然后只为具有值的字段设置值，并去掉模型。再加上第二个选择

---

但总而言之，上述解决方案应该可以消除您的错误！：）

第一个问题是数据是异步的，因此在所有字段上呈现视图时，

客户

将是

未定义的

。第二个问题是，由于某些字段没有值，因此也会抛出错误

通常，只需初始化

客户

，即可解决此问题：

customer = {};

但这里的问题是，尽管如此，您仍有一些更深层次的属性路径会抛出错误，例如：

customer.BillAddr.Line3

。当然，您可以初始化对象中的所有属性，但这对我来说太难看了

所有这些都可以通过解决。不幸的是，双向绑定，即

[（ngModel）]

不允许安全导航操作员

但是

[（ngModel）]=“某物”

等于以下各项：

[ngModel]="something" (ngModelChange)="changeHappened($event)"

单向绑定不支持安全导航操作员。因此，接下来可以做的是使用三元运算符，它捕捉用户所做的输入，并使用

customer.Title=$event

将其分配给变量（在本例中）。通过使用三元运算符，您可以通过向字段应用空字符串来消除最初没有值时出现的错误

undefined

：

[ngModel]="customer?.Title" 
(ngModelChange)="customer?.Title ? customer.Title = $event : ''"

（所有的功劳都归于这个答案：）

我还建议在这里使用一个模型驱动的表单，您可以将所有字段最初设置为空，然后只为具有值的字段设置值，并去掉模型。再加上第二个选择

---

但总而言之，上述解决方案应该可以消除您的错误！：）

它与我提供的答案有什么关系？它与我提供的答案有什么关系？