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 訂閱示例