如何在Angular中创建一个可观察对象的管道/映射

Question

一个嵌套对象以[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;
}

我遇到了错误： Error TS2345 (TS) Argument of type 'Address' is not assignable to parameter of type 'OperatorFunction<{}, Client[]>'。

我遇到了一个错误：Error TS2345（TS）类型为“Address”的参数无法分配给类型为“OperatorFunction<{}，Client[]>”的参数。

- Tong

---

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

此外，这样的强制类型转换只是欺骗Typescript（这没关系），但实际上不会在返回的数据中进行任何转换。 - Ashish Ranjan

@xyz 现在再读一遍就有意义了。我已经盯着它看太久了。主要目标是将 client.address 转换为 Address，以便我可以用它进行插值。有什么建议吗？ - Tong

更改方法的返回类型：getClients(customerId: number): Observable<Address> {}，如果它只返回地址而不是完整客户端，则可能还要更改方法名称。 - Ashish Ranjan

除此之外，获取全部客户端似乎是更好的选择。如果需要，可以使用以下代码来获取客户端：getClients(customerId: number): Observable<Client> { ... return this.http.get<Client>(clientUrl) }。请记得删除订阅地址。 - Ashish Ranjan

Answer 1

1）从您的getClients()方法中删除管道部分。

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

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

重要的是要理解：当你在.pipe()中调用.map()方法时，你不会得到一个单独的客户端，而是得到整个客户端数组，推送到Observable中。因为你映射存储在Observable中的值-类型为< Client[] >的值。

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

- Dasha Ermolova

---

谢谢，这就是我想做的。 - Tong

先生，您能告诉我如何处理客户端地址（client.address）为空的情况吗？ - Kapil Soni

对于那些不熟悉rxjs库（就像我一样）的人：使用以下导入来使用map操作符 import { map } from 'rxjs/operators';。 - pdem

Answer 2

这里有一个问题：

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

您请求以可观察方式返回函数（客户端数组）的形式，但实际上您返回了地址的Observable。

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

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

- Akshay Rajput