Javascript 访问嵌套类方法

这似乎是一篇荒谬的文章，但我花了几天时间试图弄清楚如何访问嵌套类方法。此应用程序中有两个模型，一个用户模型和一个PersonalInfo模型。它们的定义如下：

用户

export class User implements Deserializable {
  public id: number;
  public emailAddress: string;
  public username: string;
  public password: string;
  public userInfo: PersonalInfo;

  deserialize(input: any): this {
    return Object.assign(this, input);
  }

  get fullName() {
    return this.userInfo.fullName();
  }
}

个人信息

import {Deserializable} from "./deserializable.model";

export class PersonalInfo implements Deserializable {
  public infoId: number;
  public firstName: string;
  public lastName: string;
  public street: string;
  public city: string;
  public stateId: number;
  public zipCode: string;
  public mobileNumber: string;
  public homeNumber: string;
  public workNumber: string;

  deserialize(input: any): this {
    return Object.assign(this, input);
  }

  /**
   * Return the user's full name.
   */
  fullName(): string {
    return this.firstName + " " + this.lastName;
  }
}

**HTML文件**

<button class="btn-success"(click)="getUser(0)">Get User</button>
<button (click)="getUserList()">User List</button>
<div *ngIf="userList && userList.length > 0">
  <table>
    <thead>
      <th>Username</th>
      <th>Email</th>
      <th>Full Name</th>
    </thead>
    <tbody *ngFor="let user of userList">
      <td>{{user.username}}</td>
      <td>{{user.emailAddress}}</td>
      <td>{{user.fullName}}</td>
    </tbody>
  </table>

</div>

获取用户
用户列表
用户名
电子邮件
全名
{{user.username}
{{user.emailAddress}
{{user.fullName}

---

angular应用程序返回单个用户对象。我尝试调用“fullName”方法，该方法应打印连接在一起的用户的名字和姓氏。但是，我得到以下错误：“this.userInfo.fullName不是函数。（在'this.userInfo.fullName（）'中，'this.userInfo.fullName'未定义）”。有什么明显的地方我遗漏了吗？

你必须用括号调用

全名，因为它是一个函数而不是属性，所以你的html应该是这样的

<div *ngIf="userList && userList.length > 0">
  <table>
    <thead>
      <th>Username</th>
      <th>Email</th>
      <th>Full Name</th>
    </thead>
    <tbody *ngFor="let user of userList">
      <td>{{user.username}}</td>
      <td>{{user.emailAddress}}</td>
      <td>{{user.fullName()}}</td>
    </tbody>
  </table>

</div>


用户名
电子邮件
全名
{{user.username}
{{user.emailAddress}
{{user.fullName（）}}
问题在于在方法中使用Object.assign（此，输入）对用户进行反序列化

我认为你可以像这样重写

deserialize(input: any): this {
    if (input["userInfo"]) {
      this.userInfo =
        this.userInfo == null
          ? new PersonalInfo().deserialize(input["userInfo"])
          : this.userInfo.deserialize(input["userInfo"]);
      delete input["userInfo"];
    }
    else
    {
      if (!this.userInfo)
        this.userInfo=new PersonalInfo()
    }
    Object.assign(this, input);
    return this;
  }

这允许你做，例如

this.userList.push(new User().deserialize(
     {id:1,emailAddress:'qqq@qqq.com'
      userInfo:{firstName:'firstName',lastName:'lastName'}
     }))

请参见
Does
this.userInfo
，同时返回未定义的

？userInfo已定义。它具有来自数据库的所有预期数据。没有IDE错误，因为User.model.ts中的函数是一个“getter”函数，它不需要也不接受括号。