在注入服務的Angular應用程式中，異步的正確用法是什么？-有解無憂

我的目標是實作洗掉 firebase 集合中特定檔案的功能，作為組件中的按鈕。為此，我使用 Angular 服務來獲取集合中的所有檔案 ID，如下所示（因為 ID 在其他組件中也具有實用性）：

getCurrUserDocID(){ 
      this.getUsers().subscribe(arr =>{
         this.listUsers = arr.map(item => {
           return{
            userDocID : item.payload.doc.id,
            ...item.payload.doc.data() as User
           }
        })
      }) 

      return{        
        userIDs : this.listUsers
      };

將此服務注入組件確實允許我獲取 docID。然而，它很挑剔。當我在導航欄選項卡下加載的組件中的 ngOnInit 中呼叫它時，除非我單擊該選項卡幾次，否則它不起作用：

ngOnInit(): void {
    console.log(this.service.getCurrUserDocID().userIDs)
  }

第一次和第二次單擊在控制臺中回傳一個空陣列，而第三次最終回傳實際的資料陣列。我懷疑這與可觀察物件和異步性有關。

uj5u.com熱心網友回復：

您正在使用訂閱從this.getUsers()觀察者那里獲取資料。在獲取新資料時，您設定的值this.listUsers。現在，您在組件中只需要訪問 this.listUsers。

請記住，每次來自this.getUsers()觀察者的資料this.listUsers都會被覆寫，這將導致您的組件重新渲染。

您僅在第三次呼叫時獲得資料的事實可能與this.getUsers()回傳日期所需的時間或您使用它的方式有關。你必須注意到訂閱 observable 會回傳多個結果。

uj5u.com熱心網友回復：

不要訂閱組件，因為您需要取消訂閱它。如果要對資料進行排序map()，請使用pipe().

getCurrUserDocID(){
    this.listUsers = this.getUsers().pipe(
        map(item => {
            return {
                userDocID: item.payload.doc.id,
                ...item.payload.doc.data() as User
            }
        })
    )
};

在組件中

constructor(public: service: Service) {} // Make it public so you can use it in html file

ngOnInit(): void {
    this.service.getCurrUserDocID() // here just triger `getUsers()` function.
}

在帶有異步管道的 html 模板中

<ul>
   <li *ngFor="let item of service.listUsers | async">
      {{item.id}}
   </li>
</ul>

模板中的異步管道為您訂閱和取消訂閱，因此您無需擔心資料泄漏。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420629.html

標籤：

上一篇：未捕獲的錯誤：服務資料庫不可用firebasejavascript

下一篇：打算重定向活動時無法決議建構式