无法读取记录编辑窗体中未定义属性的角度2

Question

我的编辑窗体中有一个未定义属性的问题。我有一个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> 

当前的细节是牵强的OnInit使用此项功能：

getCustomer(id): void { 
    this.busy = this.customersService.getCustomer(id) 
      .then(customer => this.customer = customer); 

    } 

Answer 1

第一个问题是数据异步，所以当视图在所有字段上呈现时，将为undefined。第二个问题确实是，由于一些领域没有价值，也会抛出一个错误。

通常，这可以通过只初始化customer解决：

customer = {}; 

但在这里的问题是，你有一些更深层次的产权路径，将抛出虽然错误尽管如此，如：customer.BillAddr.Line3。当然，你可以初始化你的对象中的aaaall属性，但对我来说这似乎只是丑陋的。

所有这些都可以通过safe navigation operator来解决。不幸的是，双向绑定，即[(ngModel)]不允许安全的导航操作员。

但是！

[(ngModel)]="something"等于以下：

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

和单向结合不支持安全导航操作。因此，你可以做的是使用三元运算符，该运算符捕获用户输入的内容并将其分配给您的变量（在本例中为customer.Title = $event）。并通过使用三元运算符你摆脱错误undefined的，如果没有价值最初将一个空字符串到外地：

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

（一切归功于这个答案：https://stackoverflow.com/a/36016472/6294072）

另外，我可以建议使用模型驱动的形式，在这里你可以将所有字段设置为空，然后将值设置为具有值的字段并摆脱ngModel。只是抛出第二个选项。

但总而言之，上述解决方案应该摆脱你的错误！ :)