Подписка на наблюдаемый объект, который имеет свойство самостоятельной ссылки

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 и наблюдаемых?

Answer 1

В Typescript, типизация является структурной перед всем, поэтому Typescript не будет иметь проблем вообще, если вы скажете ему, что объект javascript имеет заданный тип.

Когда вы пишете:

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

Typescript понимает: «поверьте мне, объект json, возвращаемый через http, действительно является экземпляром класса Product».

Но на самом деле это не так: это просто объект jsсозданный из json и у него нет метода 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)));
}

Затем вы можете улучшить и ввести интерфейс для определения структуры продукта JSON, использовать его в http.get и реализовать свой классэто если ты так хочешь.И так далее.