我有一个完全填充的对象从我的服务器传输到我的 angular 服务。在 postman 中，我可以看到整个对象都正确存在。

即使在调用服务的 angular 组件中，当我对对象进行 JSON.stringify 并将其打印到控制台时，它也能正确显示。但是，当我尝试在视图中使用 angular 访问同一个对象时，我只能访问该对象的第一级成员。当我尝试访问现有的嵌套对象时 - 我得到： “TypeError：无法读取未定义的属性”。我认为这可能与这些字段 可能 为空有关，所以我尝试使用 ngIf 和条件链接 - 但它就是不显示这些字段。

我要指出的是，我尝试访问此对象的方式是通过子组件。有一个“个人资料页面”组件，其中包含它的两个子组件 - 查看个人资料和编辑个人资料。并且所讨论的对象是从父级传递下来的，问题是当我尝试在子级中查看它时。

服务 http 调用：

GetCustomer(username: string) {
  return this.http.get<Customer>(`${this.baseUrl}account/Customer/${username}`);
}

在“父”配置文件组件中调用它：

loadUserData() {
  if(this.user){

    if(!this.user.isAdmin){
      this.accountService.GetCustomer(this.user.userName).subscribe(
        c=>{this.customer = c}
      )}

客户界面 (.ts) 及其嵌套地址界面：

export interface Customer {

  id: number;
  firstName: string;
  lastName: string;
  userName: string;

  email?: any;
  avatar?: any;

  creditInfo?: any;
  address: Address;
  orders: any[];

  phoneNumber: number;
}

export interface Address{

  id:number;
  country:string;
  city : string;
  street:string;
  houseNumber:number;
  zip:string;
}

父模板：

<div *ngIf="EditMode">
  <app-edit-profile [customer]="customer" 
  (customerChange)="UpdateCustomerData($event)" 
  (editMode)="toggleEditMode($event)"></app-edit-profile>
</div>

<div *ngIf="!EditMode">
  <app-view-profile [customer]="customer"  (editMode)="toggleEditMode($event)"></app-view-profile>
</div>

其中一个子级（它们都有相同的问题）：

export class ViewProfileComponent implements OnInit {

  @Input() customer?:Customer;
  @Output() editMode = new EventEmitter<boolean>();//this is to toggle between the children

  

  constructor() { }

  ngOnInit(): void {
    
  }

  toggleToEdit()
  {
    this.editMode.emit(true);
    this.showjson();
  }

  showjson()
  {
    if(this.customer)
    {
      var jace = JSON.stringify(this.customer);

      console.log(jace);
    }
  }

}

控制台中 json 的输出：

{"creditInfo":null,"adress":{"id":2,"country":"Peru","city":"Hong Kong","street":"Baker street","houseNumber":221,"zip":null},"orders":[],"phoneNumber":5000000,"id":6,"firstName":"John","lastName":"Smith","userName":"jan","email":"[email protected]","avatar":null}

在子模板中，当我尝试读取第一级值（如 customer.email）时，它可以很好地显示它们，但是当我尝试获取地址的内部属性时，我得到了上述信息错误。

<section class="vh-100" *ngIf="customer">
...
 <p class="text-muted" >{{customer.firstName}}</p> // this works 

<p class="text-muted">{{customer.address.country}}</p>//this causes the error

kaboom！：

core.mjs:6461 ERROR TypeError: Cannot read properties of undefined (reading 'country')
    at ViewProfileComponent_section_0_Template (view-profile.component.html:48:45)
    at executeTemplate (core.mjs:9593:1)
    at refreshView (core.mjs:9459:1)
    at refreshEmbeddedViews (core.mjs:10584:1)
    at refreshView (core.mjs:9483:1)
    at refreshComponent (core.mjs:10630:1)
    at refreshChildComponents (core.mjs:9255:1)
    at refreshView (core.mjs:9509:1)
    at refreshEmbeddedViews (core.mjs:10584:1)
    at refreshView (core.mjs:9483:1)

我试图只包含相关的必要内容，希望我没有错过任何重要内容。

我已经阅读了我能找到的关于此事的许多其他帖子，但似乎没有一个能给我答案。

任何帮助都将不胜感激。谢谢！