通过映射将类型(接口)强制转换为可观察 [英] Casting a type (interface) via map to observable

问题描述

我一直在学习Angular的TypeScript.目前，我停留在这一刻.以前，我使用了订阅方法，并且一切正常，但并不是我决定使用异步管道重写代码，但这只是行不通....

I've been learning TypeScript with Angular. And currently I stuck as this moment. Previously I used subscribed method and everything works flawlessly, but not I decided to rewrite the code using async pipe and it just does't work....

1. RestAPI拒绝特定格式的请求

export interface responseFormat {
  success: boolean;
  data: any;
}

返回的数据可以是不同的类型.在这种特殊情况下，数据返回饭店对象...也可能是不同对象的数组...

1. returned data can be in different types. In this particular case data returns restaurant object... It also might be arrays of different objects...

export interface restaurant {
  _id: string;
  name: string;
  description: string;
  images: file[];
  cuisines: cuisine[];
  blocked: boolean;
  created: Date;
  business_hours: object;
}

1. 以前我使用以下代码(有效):
   

/* Provider */

getRestaurant(): Observable<responseFormat> {
  return this.http.get<responseFormat>(environment.api + "/restaurant");
}

/* Component */

private restaurant: restaurant;

getRestaurant() {
  this.restaurantProvider.getRestaurant().subscribe(res => {
    if (res.success) this.restaurant = res.data;
  });
}

结果是分配了变量的类型....但是我不想保留订阅记录，因此我想使用Angular异步管道来转换代码...这就是我所做的... 不起作用

as a result the type of the variable is assigned.... But I don't want to keep the record of subscriptions thus I wanted to convert the code using Angular async pipe... This is what I've done... it doesn't works

/* Provider */
getRestaurant(): Observable<responseFormat> {
  return this.http.get<responseFormat>(environment.api + "/restaurant");
}

/* Component */
private restaurantObservable: Observable<restaurant>;

getRestaurant() {
  this.restaurantObservable = this.restaurantProvider.getRestaurant().map(res => <restaurant>res.data);
  // or //
  this.restaurantObservable = this.restaurantProvider.getRestaurant().map(res => res.data as restaurant);
}

但是上面的代码没有将响应的类型强制转换为接口...

But the above code doesn't cast the type of the response to the interface...

我在做什么错??

换句话说，我可以在模板中获得Observable变量(使用 https://angular.io/api /common/AsyncPipe >就像这样:

In other words I can get the Observable variables in template (with https://angular.io/api/common/AsyncPipe> like that:

/* Provider */
getRestaurant(): Observable<responseFormat> {
  return this.http.get<responseFormat>(environment.api + "/restaurant");
}

/* Component */
private restaurantObservable: Observable<restaurant>;

getRestaurant() {
  this.restaurantObservable = this.restaurantProvider.getRestaurant().map(res => res.data as restaurant);
}

/* Template */
<div class="name">{{ (restaurantObservable | async)?.name }}</div>
// or //
<div *ngIf="restaurantObservable | async as restaurant">
  <div>{{ restaurant.name }}</div>
</div>

但是我无法在组件中观察到餐厅的属性...例如 this.restaurant.cuisines 抛出错误"Observable类型不存在属性美食"

But I can't get the property of the restaurant observable in component... For instance this.restaurant.cuisines throw the error "property cuisines does not exist on type Observable"

推荐答案

为什么不直接从您的服务中返回Observable<restaurant>?

Why not directly return an Observable<restaurant> from your service?

getRestaurant(): Observable<restaurant> {
  return this.http.get<responseFormat>(environment.api + "/restaurant")
    .map((response: responseFormat) => response.data as restaurant);
}

然后在组件侧:

getRestaurant() {
  this.restaurantProvider.getRestaurant().subscribe((res: restaurant) => {
    this.restaurant = res;
  });
}

错误处理(success标志，HTTP错误等)可以通过

The error handling (success flag, HTTP errors, etc) could be handled via an HTTP Interceptor.

这篇关于通过映射将类型(接口)强制转换为可观察的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！