将 observable 分配给 angular 8 中的变量

Question

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

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

}

Answer 1

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

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 state 管理来执行此类任务。 这样，您将有效地解耦调用外部资源的组件和服务，并使其更具可测试性。

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

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

• Parallely——reducer 可以在接收到GetCompanyStart操作时将 'loading' 标志设置为 true。

• 组件上的选择器不需要知道谁或什么调用了该服务，它只需要知道“加载”标志是真还是假 - 因此它可以显示微调器（或不显示）。

• 当服务返回数据时，效果将调度GetCompanySuccess操作，该操作将由 reducer 监听，这会将“加载”设置为 false（这将通过选择器自动发送到您的组件 - 因为 Observables 太棒了！ ) 或者它将调度GetCompanyFailed ，这会将加载设置为 false - 因为您不希望微调器继续显示 api 是否失败。