angular - 如何在 Angular 中管道/映射 Observable

标签 angular typescript angular7

嵌套对象显示为 [object Object],因此我试图通过管道和映射将其转换,但我没有得到任何结果。我已经尝试将模型作为类和接口(interface),但没有帮助。有人可以告诉我我做错了什么吗?谢谢。

函数:

  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<{}, Client[]>”类型的参数。

最佳答案

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

2) 在订阅 getClients() 之前执行管道映射或创建另一个方法,该方法将仅使用从 getClients() 返回的可观察对象执行管道部分

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

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

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

关于angular - 如何在 Angular 中管道/映射 Observable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54084815/

相关文章:

angular - ASPNETZERO - 来自 Angular 4/.Net Core 的 SelectPdf ConvertUrl() 中的身份验证

angular - Angular |有条件地显示元素

reactjs - 将 react-redux useSelector 与 typescript 一起使用

angular - 提供了重复的列名 : Angular Material Data Table

angular - 在切换时从数组中获取公共(public)字符串

javascript - Angular 4 ng-content select 不适用于动态创建的嵌入元素

typescript - 如何使用 TypeScript Compiler API 查找环境模块声明的定义位置?

javascript - 如何组织 Javascript 项目以允许在客户端 SPA 和 Node 服务器之间共享代码

javascript - 如何在 Angular 7 中管理多个可观察对象

javascript - 当 onClick 激活时,如何从组件调用的 javascript 函数中捕获值