Angular 8 在订阅中等待 rest api 响应

Question

在 component.ts 我有这个方法，它调用 api 并使用响应。 我得到一个空数组，因为它没有等待订阅

disp(): String[] {
    let scores: String[] = [];
    this.assessmentService.getPrograms().subscribe(
      (res: AssessmentResponse[]) => {
        res.map(
          function (t) {
            const body = `{id: ${t.id}, name: "${t.name}"}`;
            scores.push(body);
          })
        return scores;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
    console.log("returned");
    return scores;
  }

我想存储从 disp 返回的数组

 programList$ = observableOf(this.disp);

然后我使用 programList$ 设置选项的值，我发布了一小段代码，因为它有多个选项卡

 tabs: TabType[] = [
    {
      label: 'Assign Program',
      fields: [
        {
          fieldGroupClassName: 'display-flex',
          fieldGroup: [
            {
              className: 'flex-1',
              key: 'campaign',
              type: 'select',
              templateOptions: {
                label: 'Campaign',
                placeholder: 'Select Campaign',
                // description: 'Campaign Name',
                required: true,
                options: this.programList$,

这是我的服务电话

 public  getPrograms(): Observable<AssessmentResponse[]> {

         return this.http.get(this.endpoint,this.headers.httpOptions)
         .pipe(map((data: EmbeddedAssessmentsResponse) => data._embedded.programs));          
    }

PS：我是 angular 和 typescript 的新手，不胜感激。

Answer 1

如果你使用异步数据，你的disp()方法应该返回一个Observable并且你应该在链的末尾订阅它。

或者，您可以创建属性scores并在 subscribe 方法中分配来自 API 的数据。

Answer 2

如果你的programList$是一个 Observable，你的disp()方法应该返回一个 Observable： programList$ = this.disp();

disp(): Observable<String[]> {
  return this.assessmentService.getPrograms().pipe(
    map((res: AssessmentResponse[]) => {
        return res.map(t => `{id: ${t.id}, name: "${t.name}"}`);
      }),
    catchError((err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
        return of([]);
      });
  );

Answer 3

由于订阅回调是异步执行的，如果您在执行回调之前尝试读取它，您的数组将为空。

只需在您的组件中创建一个属性programList并在执行订阅回调时分配从 API 返回的数据，然后调用 function 来创建tabs数组。 你可以尝试这样的事情：

programList: string[];
tabs: TabType[];

disp(): void {
    this.assessmentService.getPrograms().subscribe(
      (res: AssessmentResponse[]) => {
        let scores: String[] = [];
        res.map(
          function (t) {
            const body = `{id: ${t.id}, name: "${t.name}"}`;
            scores.push(body);
          })
        this.programList = scores;
        this.createTabsArray();
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
}

createTabsArray(): void {
    this.tabs = [
    {
      label: 'Assign Program',
      fields: [
        {
          fieldGroupClassName: 'display-flex',
          fieldGroup: [
            {
              className: 'flex-1',
              key: 'campaign',
              type: 'select',
              templateOptions: {
                label: 'Campaign',
                placeholder: 'Select Campaign',
                // description: 'Campaign Name',
                required: true,
                options: this.programList,
                ...
                ...
                }
            ...
            ...
            }]
}

Answer 4

一种方法是使用异步/等待模式来获取数据。

  private async fetchData(){
    const data = await this.httpClient.get(this.apiUrl).toPromise();
    console.log("Data: " + JSON.stringify(data)); 
  }

不过，我不建议这样做。 您可以尝试将分数发送到另一个 function 并在那里处理数据

例如：

disp(): String[] {
this.assessmentService.getPrograms().subscribe(
  (res: AssessmentResponse[]) => {

    handleResponse(res);
  },
  (err: HttpErrorResponse) => {
    if (err.error instanceof Error) {
      console.log("Client-side error occured.");
    } else {
      console.log("Server-side error occured.");
    }
  });
  // return scores;
}

然后，您的句柄响应将执行您希望它为您的组件执行的任何操作。