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()}`
    }
}

在组件控制器的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中，输入在所有内容之前都是结构性的，因此如果你告诉他javascript对象属于给定类型，那么Typescript根本就没有问题。

当你写：

MediaQuery.of(context).size.width - qouoteWidth*2

Typescript理解：＆＃34;相信我，通过http返回的json对象确实是类this.http.get<Product>(`${this.baseURL}/${id}`);＆＃34;的实例。

但事实上这不是真的：它只是一个从json创建的js对象，它并没有真正的方法Product。

如果您希望这是真的，您需要显式创建timeCreatedDisplay的实例，例如：

Product

然后：

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

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

然后你可以改进并引入一个接口来定义JSON产品的结构，在getProduct(id: number): Observable<Product> { return this.http.get<any>(`${this.baseURL}/${id}`).pipe(map(j => new Product(j.timeCreated))); }中使用它，并让你的类实现它，如果你愿意的话。等等。

订阅具有自引用属性的observable

1 个答案: