Question

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

example %>% pivot_longer(cols = !c(person, start_loc, start_date), names_sep = '\\.', 
                                               names_to = c('.value', 'number'),
                                               values_drop_na = T) %>%
                        group_by(person) %>%
                        mutate(diff = end_date - start_date,
                               cond2 = diff <= 7 & diff >= 0,
                               cond1 = start_loc == end_loc) %>%
                        filter(cond2) %>%
                        arrange(person, -cond1, diff) %>%
                        summarise(end_date = first(end_date),
                                  end_loc = first(end_loc))

# A tibble: 5 x 3
  person end_date   end_loc
   <int> <date>     <chr>  
1      1 2021-02-17 g      
2      2 2021-02-04 g      
3      4 2020-12-12 c      
4      5 2021-03-29 t      
5      6 2021-04-07 b

assets 文件夹中的上述 JSON 文件有一个 JSON 对象数组。我想将响应转换为 ShoppingCartItem 对象数组。下面给出的是我要映射的 ShoppingCartItem 类。如何实现这一目标？

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

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

Answer 1

您已经掌握了基本原理。在 Angular.component ts 文件中，

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

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

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

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

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

在你的情况下，它可以像

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

工作 Stackblitz 如下。

Local JSON subscription example

将 Angular http 客户端获取请求的响应映射到 Typescript 类对象

1 个答案: