如何在 Angular 中管道/映射 Observable

Posted 2023-03-13

【中文标题】如何在 Angular 中管道/映射 Observable

【英文标题】：How to pipe / map an Observable in Angular

【发布时间】：2019-06-02 17:36:04

【问题描述】：

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

功能：

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

模型：

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;

我收到错误： 错误 TS2345 (TS)“地址”类型的参数不可分配给“OperatorFunction”类型的参数。

【问题讨论】：

当你的返回类型是Observable<Client[]> ，你为什么返回Observable<Address> ？

另外，像这样的投射只是在愚弄 Typescript（这很好），但它实际上不会对返回的数据进行任何转换。

@xyz 现在我再次阅读它是有道理的。我已经盯着它太久了。主要目标是使 client.address 成为地址，以便我可以将其用于插值。有什么建议吗？

更改方法的返回类型：getClients(customerId: number): Observable<Address> ，如果返回的只是地址而不是完整的客户端，也可能是方法名称。

否则，返回完整的客户端，getClients(customerId: number): Observable ... return this.http.get(clientUrl) 。拿出你订阅的地址。 获得完整的客户似乎是一个更好的选择

【参考方案1】：

问题出在这里：

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

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

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

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

【参考方案2】：

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

2) 在订阅 getClients() 或创建另一个方法之前执行管道映射，这将只使用从 getClients() 返回的 observable 执行管道部分

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

理解这一点很重要：当您在 .pipe() 中调用 .map() 方法时，在这种情况下您不会获得单个客户端，而是会获得整个客户端数组，并推送到 Observable。因为您映射了存储在 Observable 中的值 - 类型的值：。

你的管道映射可以在一些 Observable 上工作，它发出一个 类型的客户端，而不是一个数组。

【讨论】：

谢谢，这就是我想要做的。

先生，如果client.address) 为空，您能告诉我如何处理吗？