Angular 数据绑定到类成员函数

假设我必须学习以下课程：

export class Address {
    id: number;
    streetAndNumber: string;
    addressSuffix: string;
    city: string;
    zip: string;

    toString(): string {
        return this.streetAndNumber + ', ' + this.zip + this.city;
    }

    asOptionX(): string {
        return 'asjfhklasjfh';
    }
}

export class Person {
    id: number;
    description: string;
    address: Address;
}

HttpClient检索到Person类型的对象：

this.http.get<Person>(...).subscribe(data => person = data;)

控制台中输出错误：

…address.asOptionX不是函数

我也没有运气去尝试做一个有成就感的人并与之结合

---

怎么了？

看起来您没有将对象映射到类-您是说它具有该类型，但这与创建

人员的实例，然后在其中创建
地址的实例不同

您需要为
Person
创建一个构造函数，并从
data
中获取正确的成员数据，对
地址
执行相同的操作-但从
Person
构造函数中调用该构造函数

非常糟糕的方法（有效）是简单地让构造函数与此类似-

export class Address {
    constructor(data: object) {
        super();
        Object.assign(this, data);
    }
    ...
}

但是，您应该只复制正确的成员-不需要更多的工作，而且更安全…
看起来您没有将对象映射到类-您是说它具有该类型，但这与创建
个人的实例，然后在其中创建
地址的实例不同

您需要为
Person
创建一个构造函数，并从
data
中获取正确的成员数据，对
地址
执行相同的操作-但从
Person
构造函数中调用该构造函数

非常糟糕的方法（有效）是简单地让构造函数与此类似-

export class Address {
    constructor(data: object) {
        super();
        Object.assign(this, data);
    }
    ...
}

但是，您应该只复制正确的成员-不需要更多的工作，而且更安全…
当您进行HTTP调用时，您得到的答案是一个普通对象，而不是类的实例

在代码中，这意味着

const person = { address: {...}, id: 1, description: '' };

而不是

const person = new Person(1, '', new Address(...));

您需要显式声明对象是类的实例

要做到这一点，您需要像这样映射您的呼叫

this.http.get<Person>(...)
  .map(person => {
    const _person = new Person();
    _person.id = person.id;
    // ... And so on
  });

this.http.get（…）
.map（person=>{
const_person=新人（）；
_person.id=person.id；
//……等等
});

您可以使用它，也可以使用自定义构造函数，或者使用接受响应并返回实例的函数。也有一些库可以做到这一点，例如，当您进行HTTP调用时，得到的答案是一个普通对象，而不是类的实例

在代码中，这意味着

const person = { address: {...}, id: 1, description: '' };

而不是

const person = new Person(1, '', new Address(...));

您需要显式声明对象是类的实例

要做到这一点，您需要像这样映射您的呼叫

this.http.get<Person>(...)
  .map(person => {
    const _person = new Person();
    _person.id = person.id;
    // ... And so on
  });

this.http.get（…）
.map（person=>{
const_person=新人（）；
_person.id=person.id；
//……等等
});

您可以使用它，也可以使用自定义构造函数，或者使用接受响应并返回实例的函数。有些库也可以做到这一点，例如
为什么会有超级调用？否则，你能解释一下为什么它不好吗？我有点喜欢构造器的简单性（我以前不知道这种方法），您应该始终包括
super（）
调用，以便将任何init传递到链中更高的位置（在本例中是对象构造器）。这是不好的，因为您可能会以这种方式覆盖内容，而没有检查它是否确实是正确的数据（即，验证是否有输入错误等），这也会使测试变得更困难，因为您基本上允许任何内容通过。最后，这种方法不适用于创建子类-您仍然需要
Person
来拥有
this.address=新地址（data.address），为什么会有超级呼叫？否则，你能解释一下为什么它不好吗？我有点喜欢构造器的简单性（我以前不知道这种方法），您应该始终包括
super（）
调用，以便将任何init传递到链中更高的位置（在本例中是对象构造器）。这是不好的，因为您可能会以这种方式覆盖内容，而没有检查它是否确实是正确的数据（即，验证是否有输入错误等），这也会使测试变得更困难，因为您基本上允许任何内容通过。最后，这种方法不适用于创建子类-您仍然需要
Person
来拥有
this.address=新地址（data.address）。