Angular - 从承诺中获取值

如何解决Angular - 从承诺中获取值

我有一个 getClients 方法，它是对 Web 服务的调用，返回一个 Json 答案，其中一个字段是“响应”（将所有客户端返回为接口 Data[] ）

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

我在另一个组件中有一个方法 getResults() :

  filterData: Data[];

  getResults(): Promise<Data[]> {
    const promise = new Promise<Data[]>((resolve,reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then( clients => {
          clients.response.json as Data[];
        })
        .catch(this.handleError);
        ;
    });

    return promise;
  }`

=> 返回承诺；

另一个组件：接收结果，这里我希望它是接口Data[]

  clients: Promise<Data[]>;

  constructor( private service: Service ) {
    this.clients = this.service.getResults();
    console.log('clientsssss : ' + this.clients);
  }

  ngOnInit() {
  }

接口数据——这是“响应”字段中的结构

export interface Data {
  clientName: string;
  clientId: number;
}

我没有成功从方法 getResults 取回我需要的数据（接口数据）

我首先尝试使用 Observable，但它是一个很长的列表，它没有给出任何结果（空），所以我读到它是异步的，所以我需要使用“承诺”。

解决方法

我阅读了所有关于异步调用的建议页面。 很多人会对所有这些信息感到不知所措，甚至很难找到您需要的信息...

解决方案在这里： （对于其他和我一样搜索了好几个小时的人！）

我有一个 getClients 方法，它是对 Web 服务的调用，返回一个 Json 答案，其中一个字段是“响应”（将所有客户端返回为接口 Data[] ）

  getClients(): Observable<any> {
    // Get all clients from the database
    return this.http.get<any>(environment.apiURL + '/client/list' );
  }

我将我的方法 getResults() 调整为：

  filterData: Data[];

...

  async getResults(): Promise<Data[]> {
    const promise = await new Promise<Data[]>((resolve,reject) => {
      this.restApiService.getClients()
        .toPromise()
        .then(
          res => {
            // Success
            this.filterData = res.response;
            resolve();
          },msg => {
            // Error
            reject(msg);
          }
        )
        .catch(this.handleError);
    });
    console.log('ress : ' + JSON.stringify(this.filterData));
    return promise;
  }

  private loading: boolean = false;

  constructor( private service: Service ) {
    this.loading = true;
    const promise = this.service.getResults();
    this.loading = false;
    console.log('clientssss : ' + this.service.filterData);
  }

接口数据 - 这是“this.searchService.filterData”字段的结构（之后可以在html组件中使用）

export interface Data {
  clientName: string;
  clientId: number;
}

罗尼