如何使用 angular 中的异步字段转换后端数据？

Question

在我的 angular 应用程序中，我必须从后端 API 转换一些数据。问题是某些字段也需要从服务器分配数据。

例如，我有一个客户（这是一个简化的例子）：

{
  id: 1122,
  firstname: 'John',
  lastname: 'Doe',
  countryId: 12
}

有一个国家ID。我想通过ID从服务器获取国家名称。

我在模板中使用了异步 angular 管道，returns 可观察到国家名称字符串：

<h3>{{ client.countryId | countryAsyncPipe | async}}</h3>

但我不仅需要模板中的数据。

那么，我该如何解决这种问题呢？

谢谢！

更新:

对不起，我在问题中没有提供足够的信息。我将尝试用一些假设的例子来解释我的意思。

首先，I.ve 忘了说我正在尝试创建 DTO。我有一个 API 服务，例如 ClientHttpService:

@Service()
class ClientHttpService extends Http {

  findAll(): Observable<Array<Client>> {
    return this.get(this.url).pipe(
        map(client => clientSerializer.fromJsonFactory(client))
      );
  }
}

我收到 JSON 个客户端并使用序列化程序服务创建 ClientModel 的实例（不是必需的，它可能是一个文字对象）：

class Client extends Model {
  id: number;
  firstname: string;
  lastname: string;
  countryName: string;

  constructor({ id, firstname, lastname, countryName }) {
    //...set object properties
  }
}

@Service()
class ClientSerializer implements Serializer {

  public fromJson(data: any): Client {
    return new Client({
      id: data.id,
      firstname: data.firstname,
      lastname: data.lastname,
      countryName: data.countryId // trouble
    });
  }

  public fromJsonFactory(data: Array<any>): Array<Client> {
    return data.map(client => this.fromJson(client));
  }
}

嗯，问题来了。我真的不明白如何提供国家名称。比方说，我有 CountryService:

@Service()
class CountryHttpService extends Http {

  findNameById(id: number): Observable<string> {
    return this.get(`countryUrl`).pipe(map(country => country.name));
  }
}

如果结果 returns 可观察，我如何才能正确地将结果提供给我的序列化程序？

return new Client({
  //...
  countryName: countryService.findNameById(data.countryId) // Observable, not string
});

Answer 1

使用 findById(id:number) 方法创建一个 Http CountryService，将此服务注入到您的组件中。

Answer 2

您需要 subscribe() 或 toPromise().then() 才能在 .ts 文件中获取所需的数据。例如，假设您有一个带有方法

的 CountryService

getCountryName(countryId: number): Observable<string> {
   return this.http.get<string>(your endpoint);
}

在您想要获取 countryName 的组件中，您应该注入您的服务并且：

this.countryService .getCountryName(countryId).toPromise().then( (countryName: string) => {
   // transform your data here
});

或将 toPromise().then() 替换为 subscribe()。

更新:

 public fromJson(data: any): Client {
    this.countryService.findNameById(data.countryId).subscribe((countryName: string) => {
        return new Client({
           id: data.id,
           firstname: data.firstname,
           lastname: data.lastname,
           countryName: countryName
        });
    });
   return null;
 }

如何使用 angular 中的异步字段转换后端数据？

How do I transform backend data with async fields in angular?

dto

typescript

angular