typescript 如何在 Angular 中管道/映射 Observable

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/54084815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:45:42  来源:igfitidea点击:

How to pipe / map an Observable in Angular

angulartypescriptangular7

提问by Tong

A nested object is showing up as [object Object] so I'm trying to cast it via pipe and map but I'm not getting any where. I've tried the models as classes and interfaces but no help. Can someone tell me what I'm doing wrong? Thanks.

嵌套对象显示为 [object Object],所以我试图通过管道和地图投射它,但我没有得到任何地方。我已经尝试将模型作为类和接口,但没有帮助。有人可以告诉我我做错了什么吗?谢谢。

The function:

功能:

  getClients(customerId: number): Observable<Client[]> {
    let clientUrl = 'SOME_URL';
    return this.http.get<Client[]>(clientUrl)
      .pipe(map(client: Client) => client.address as Address);
  }

The models:

型号:

import { Address } from './address.model';

export class Client{
  id: number;
  name: string;
  accountNumber: string;
  addressId: number;
  phoneNumber: string;
  address: Address;
}


export class Address{
  id: number;
  name: string;
  addressLine1: string;
  addressLine2: string;
  city: string;
  postalCode: string;
}

I'm getting the error: Error TS2345 (TS) Argument of type 'Address' is not assignable to parameter of type 'OperatorFunction<{}, Client[]>'.

我收到错误消息:“地址”类型的错误 TS2345 (TS) 参数不可分配给“OperatorFunction<{}, Client[]>”类型的参数。

采纳答案by Dasha Ermolova

1) remove the piping part from your getClients() method

1) 从 getClients() 方法中删除管道部分

2) do the pipe-map before subscribing to getClients() or create another method, that will do only the piping part with the observable returned from getClients()

2)在订阅 getClients() 之前做管道映射或创建另一个方法,这将只使用从 getClients() 返回的可观察的管道部分

mapToAddress(): Observable<Address[]> {
  this.getClients.pipe(
    map((clients: Client[]) => clients.map(client => client.address))
  )
}

This is important to understand: when you call .map() method inside .pipe(), you're not getting a single client in this case, you get the whole clients array, pushed to Observable. Because you map the values, that are stored in the Observable - the values of type: < Client[] >.

理解这一点很重要:当你在 .pipe() 中调用 .map() 方法时,在这种情况下你不会得到一个客户端,你会得到整个客户端数组,推送到 Observable。因为您映射了存储在 Observable 中的值 - 类型的值:<Client[]>。

Your pipe-map would work on some Observable, that emits a single client of type < Client >, not an array.

您的管道映射将在一些 Observable 上工作,它发出一个 <Client> 类型的客户端,而不是一个数组。

回答by Akshay Rajput

The problem is here:

问题在这里:

getClients(customerId: number): Observable<Client[]> {

you requested the function to return in form of observable (array of client) but actually you are returning Observable of Address.

您请求函数以 observable(客户端数组)的形式返回,但实际上您返回的是地址的 Observable。

.pipe(map(client: Client) => client.address as Address);

That's why the function is throwing this error. Replace Observable<Client[]>with Observable<Address[]>

这就是该函数抛出此错误的原因。替换Observable<Client[]>Observable<Address[]>