angular http 客户端获取请求到 Typescript ZA2F2ED4F8EBC2CBB164C21A29DC40 对象的映射响应

Question

我正在使用 angular 中的服务从如下给出的路径中检索 JSON 响应。

const request = this.http.get<ShoppingCartItem>('assets/json/shopping-cart-test.json');

资产文件夹中的上述 JSON 文件有一个 JSON 对象数组。 我想将响应转换为 ShoppingCartItem 对象数组。 下面给出的是我想要 map 的 ShoppingCartItem class。 如何做到这一点？

export class ShoppingCartItem {
  $key: string;
  title: string;
  imageUrl: string;
  price: number;
  quantity: number;

  constructor(init?: Partial<ShoppingCartItem>) {
    Object.assign(this, init);
  }

  get totalPrice() { return this.price * this.quantity; }
}

我不熟悉使用 subscribe、pipe 和 map 等方法处理 HTTP 响应。 详细的解释会更有帮助。

Answer 1

你已经有了正确的基本面。 在 Angular.component ts 文件中，

我们首先创建一个您期望从请求中获得的最终类型的请求，即 - ShoppingCartItem 类似于您在代码中所做的

 const shoppingCartItem$: Observable<ShoppingCartItem> = http.get<ShoppingCartItem>('/assets/db.json');

注意shoppingCartItem$ 上的 $sign，通常与 Observable 一起使用，这是您在 Angular 中发出 HTTP 请求时的返回类型。

在这种情况下，订阅部分是在声明我们的 Observable 之后完成的。 订阅方法用于发出 HTTP 请求，没有它就不会向服务器发出请求。

Pipe 和 map 是 RXJS 运算符，允许我们更改响应。 它基本上使您可以访问 observable 中的数据，以便您进行更改。 它们通常结合使用。

在您的情况下，它可以像这样使用

  this.shoppingCartItem$:.pipe(
    map((items: shoppingCartItem[]) => items.map(items=> items.key))
  )

工作 Stackblitz 如下。

本地 JSON 订阅示例