将observable赋值给angular 8中的变量

Question

在我的angular 8应用程序中，我在一个服务函数中有一个api调用，该函数是一个观察值。api调用是异步的，需要2-3秒，所以我想显示一些指示器，比如沙漏，直到api调用完成。我可以通过等待响应并将其赋值给变量来实现这一点吗？下面是我的观察点：

getCompany(val: string): Observable<string[]> {
return this.http.get<string[]>(`-------myapicall------------`);

}

Answer 1

您可以在等待loading调用完成时在组件中设置API标志：

getCompany(val: string) {
  this.loading = true

  this.apiService.getCompany(val)
    .subscribe(
      (company) => {
        this.loading = false
      
        // Do something with company data
      },
      (err) => {
        this.loading = false

        // Handle error
      }
    )
}

然后，您可以在模板中使用loading标志来显示沙漏。

注意:记住要处理取消订阅。

Answer 2

您总是可以利用Ngrx状态管理来执行这样的任务。这样，您将有效地将调用外部资源的组件和服务解耦，并使其更具可测试性。

您可以为GetCompanyStart、GetCompanySuccess、GetCompanyFailed编写操作。

• 然后您可以编写一个侦听GetCompanyStart的效果，当该效果收到操作时，它将继续调用您的服务上的相关方法。一旦此服务返回

并行加载-当接收到动作GetCompanyStart.时，reducer可以将‘’标志设置为true

• 组件上的选择器不需要知道是谁或什么调用了服务，它只需要知道'loading‘标志是真还是假-这样它就可以显示(或不显示)微调器。

• 当服务返回数据时，效果将分派reducer将监听的加载操作，这将把‘GetCompanySuccess’设置为false (这将自动通过选择器发送到您的组件-因为可观察性非常棒！！)否则，它将调度GetCompanyFailed，这将把装入设置为false -因为您不希望微调控件在api失败时继续显示。