Question

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

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

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

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

我在模板中使用了异步角度管道，该模板返回了带有国家/地区名称字符串的Observable：

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

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

那么，我该如何解决此类问题？

谢谢！

更新：

很抱歉，我没有在问题中提供足够的信息。我将通过一些假设的例子来解释我的意思。

首先，我忘了说我正在尝试创建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));
  }
}

如果序列化器返回Observable，如何将结果正确地提供给我的序列化器？

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中的async字段转换后端数据？

2 个答案: