如何刷新从服务中检索的数据？

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>