如何刷新從服務中檢索的數據？

Question

我想顯示可用房間的列表

在我的家庭組件中列出。

為此，我聲明了分配給 websocketService 訂閱的房間變量。 但是，每當我創建一個新房間時，除非我刷新頁面，否則它不會自動添加到列表中。 我該如何解決？

home.component.ts

public getRooms() :  Observable<any> {
      return this.http.get(`${this.url}/rooms`,{observe: 'response'});

網絡套接字服務：

<ul>
  <li *ngFor="let room of rooms">{{rooms}}</li> 
</ul>

主頁.html：

 <ul> <li *ngFor="let room of rooms">{{rooms}}</li> </ul>

Answer 1

 ngOnInit(): void { 
       this.webSocketService.getRooms().subscribe(res => {
          this.rooms = res
         });
       }

您需要在訂閱中可用的 class 變量中進行分配

Answer 2

嘗試將您的可變房間轉換為可觀察的，並從服務中獲取參考。 在模板中，您將使用 Async Pipe 獲得訂閱。

ngOnInit(): void { 
  this.rooms$ = this.webSocketService.getRooms();
}

<ul>
  <li *ngFor="let room of rooms$ | async">{{room.someProperty}}</li> 
</ul>