將 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 是否失敗。