如何在 Angular 中管道/映射 Observable答案

【问题标题】：How to pipe / map an Observable in Angular如何在 Angular 中管道/映射 Observable
【发布时间】：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) }。拿出你订阅的地址。 获得完整的客户似乎是一个更好的选择

标签： angular typescript angular7

【解决方案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) 为空，您能告诉我如何处理吗？