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

【问题标题】：Angular 8 wait for rest api response in subscribeAngular 8在订阅中等待rest api响应
【发布时间】：2020-03-16 06:44:18
【问题描述】：

在 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 的新手，感谢任何帮助。

【问题讨论】：

如果你想等待订阅被调用，你的代码没有意义。 disp() 在哪里被调用？
从调用 disp 的地方更新

标签： javascript angular typescript angular8

【解决方案1】：

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

只需在你的组件中创建一个属性programList，并在执行订阅回调时分配从API返回的数据，然后调用一个函数来创建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,
                ...
                ...
                }
            ...
            ...
            }]
}

【讨论】：

【解决方案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([]);
      });
  );

【讨论】：