Question

我想将所有来自函数的响应加载到component.ts文件中，然后让模板查看该数据。

我的ngOnInit函数中有3个函数，这些响应使我得到了将其加载到模板中的响应。

    ngOnInit() {
        this.getSong();
        this.getAllSongs();
        this.getProjects();
    }

    // get Latest Song
    getSong() {
        this.amen.getSongs(this.singleSongParam).subscribe(
            (response) => {
                this.handleSongResponse(response);
            },
            (error) => {
                this.error = error.error.errors;
            }
        );
    }

    getAllSongs() {
        this.amen.getSongs(this.allSongsParam).subscribe(
            (response) => {
                this.handleSongsResponse(response);
            },
            (error) => {
                this.error = error.error.errors;
            }
        );
    }

    getProjects() {
        this.amen.getProjects(this.projectsParam).subscribe(
            (response) => {
                this.handleProjectsResponse(response);
            },
            (error) => {
                this.error = error.error.errors;
            }
        );
    }

也许我使用async/await，但不知道如何在订阅中使用它。。。如果有任何方法，请帮忙。

Answer 1

您可以在.ts中使用forkJoin，在模板中使用*ngIf来实现它。

尝试这样：

.ts

  loadTemplate: false;

  ngOnInit() {

    const request1 = this.getSong();
    const request2 = this.getAllSongs();
    const request3 = this.getProjects();

    forkJoin([request1, request2, request3]).subscribe(data => {
      this.loadTemplate = true;
    });
  }

.html

<ng-container *ngIf="loadTemplate">
  ...
</ng-container>

Answer 2

获得响应后，使用* ngIf显示模板

Answer 3

您可以使用forkjoin。分支联接并行执行所有请求操作，最后联接结果。代码是这样的：

this.registrationSubscriptionForkJoin = forkJoin([this.service1, this.service2...]).subscribe(response => {
                  this.listresulserivce1 = response[0];
                  this.listresultservice2= response[1];
                }

您可以使用自己的方法在ngOnInit中调用forkjoin

Answer 4

一种解决方法是，在组件中创建一个字段，并在获得所有响应后将其设置为true。在条件为*ngIf的模板中使用此字段。

Answer 5

如果您在模板中使用*ngIf，则模板将等待直到变量准备就绪。让我们在ts文件中考虑以下功能：

public exampleFunction(){
  // some promise or observable function like http request that has to be subscribed
  exampleHttpRequest().subscribed(res = > {
   this.exampleVariable = respond 
  })
}

并且html模板应该是这样的：

<template *ngIf="exampleVariable">
  <!-- any component you want -->

</template>

因此，在变量准备就绪之前，不会将模板添加到DOM。

Answer 6

您可以使用“解析器”来执行此操作。您可以通过https://medium.com/better-programming/understanding-angular-resolver-what-was-the-problem-before-using-resolver-and-why-we-need-it-7502554ab7a3

Answer 7

方法1：只需使用forkJoin和* ngIf

Live demo

* ng如果使用

<div *ngIf="condition">Content to render when condition is true.</div>

forkJoin用法

  ngOnInit() {
    // simulate 3 requests with different delays
    forkJoin(
      this._myService.makeRequest('Request One', 2000),
      this._myService.makeRequest('Request Two', 1000),
      this._myService.makeRequest('Request Three', 3000)
    )
    .subscribe(([res1, res2, res3]) => {
      this.propOne = res1;
      this.propTwo = res2;
      this.propThree = res3;
    });
  }

方法2：使用解析界面

Live demo

解决用法

@Injectable({ providedIn: 'root' })
export class HeroResolver implements Resolve<Hero> {
  constructor(private service: HeroService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return forkJoin(
       this.service.getHero1(),
       this.service.getHero2(),
       this.service.getHero3(),
    );
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {
          hero: HeroResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

参考

rxjs - forkJoin

Angular - *ngIf

Angular - Resolve

如何让component.ts在加载模板之前加载所有响应？

7 个答案: