javascript - 订阅具有自引用属性的 observable

Question

我有一个存储时间信息的类，我的服务器将向我返回时间戳。所以我想格式化并显示日期。

export class Product {
    timeCreated: number;

    // this don't work
    get timeCreatedDisplay () {
        const dateObject = new Date(this.timeCreated);
        return `${dateObject.getDate()}/${dateObject.getMonth() + 1}/${dateObject.getFullYear()}`
    }
}

在组件 Controller 的 ngOnInit() 中这个

this.productService.getProduct(this.productId).subscribe(product => {
  this.product = product;
});

服务

getProduct(id: number): Observable<Product> {
  return this.http.get<Product>(`${this.baseURL}/${id}`);
}

景色

{{product.timeCreatedDisplay}}

<小时/>我尝试设置 timeCreatedDisplay 函数返回固定值并删除 API 调用(不调用 this.productService.getProduct...... 行)。它工作并显示固定值。

我也尝试过

this.productService.getProduct(this.productId).subscribe(product => {
  this.product = product;
  console.log(this.product.timeCreated)
  console.log(this.product.timeCreatedDisplay)
});

这给了我未定义的 timeCreatedDisplay 和 timeCreated 的正确值

所以我认为这是由 http 和 observable 的使用引起的？

Answer 1

在 Typescript 中，类型首先是结构性的，所以如果你告诉 Typescript 一个 javascript 对象属于给定类型，那么 Typescript 根本不会有问题。

当你写下:

this.http.get<Product>(`${this.baseURL}/${id}`);

Typescript 理解:“相信我，通过 http 返回的 json 对象确实是类 Product 的实例”。

但事实上这不是真的:它只是一个从 json 创建的 js 对象，并且它实际上没有方法 timeCreatedDisplay。

如果您希望这是真的，您需要显式创建 Product 的实例，例如如下所示:

export class Product {
    constructor(private timeCreated: number) {}

    get timeCreatedDisplay () {
        // ...
    }
}

然后:

getProduct(id: number): Observable<Product> {
  return this.http.get<any>(`${this.baseURL}/${id}`).pipe(map(j => new Product(j.timeCreated)));
}

然后，您可以改进并引入一个接口(interface)来定义 JSON 产品的结构，在 http.get 中使用它，并让您的类实现它(如果您愿意)。等等。