Question

假设我必须遵循以下课程：

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;)

现在我喜欢在我的模板中使用数据绑定，例如：

<div>{{person.address}}</div>

为什么输出[Object object]？似乎toString（）不可用。

如果我尝试：

<div>{{person.address.asOptionX()}}</div>

在控制台中输出错误：...address.asOptionX is not a function。

我也没有运气试图制造吸气剂并与它们绑定。

有什么问题？

Answer 1

您似乎没有将对象映射到班级 - 您说它具有类型，但这与创建实例不同Person，然后在其中创建Address的实例。

您需要为Person创建构造函数并从data获取正确的成员数据，并对Address执行相同操作 - 但是在{{1}内调用该构造函数构造函数。

非常糟糕的方式（有效）就是让构造函数与此类似 -

Person

然而，你应该只是复制正确的成员 - 不需要做更多的工作，而且更安全......

Answer 2

当你进行HTTP调用时，你得到的答案是普通的对象，而不是类的实例。

在代码中，这意味着你要

$TestdevlandingStorageAccount = (Get-AzureRmStorageAccount -ResourceGroupName "Test_Storage" -AccountName "Testdevlanding").Identity.PrincipalId;
$TestuatlandingStorageAccount = (Get-AzureRmStorageAccount -ResourceGroupName "Test_Storage" -AccountName "Testuatlanding").Identity.PrincipalId;

$TestdevlandingStorageAccount
$TestuatlandingStorageAccount

而不是

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

您需要明确声明您的对象是类的实例。

为此，您需要像这样映射您的电话

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

您既可以使用它，也可以使用自定义构造函数，也可以使用获取响应并返回实例的函数。也存在一些库，例如class transformer

数据绑定到类成员函数

2 个答案: