How do i refresh the data i retrieve from a service?-CodePudding

I want to display the list of available rooms in a

list in my home component.

for that I declared rooms variable that i assigned to a subscription to the websocketService. However whenever i created a new room, it's not added to the list automatically unless i refresh the page. how do i fix that?

home.component.ts

   rooms : any;
      constructor(private webSocketService: WebSocketService, private formBuilder: FormBuilder,            private router: Router)
        { }
      ngOnInit(): void { 
        this.rooms = this.webSocketService.getRooms().subscribe(res => {
          console.log(res.body)
         });
       }

webSocketService :

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

home.html :

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

CodePudding user response：

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

You need to make the assignment in the class variable inside the subscription where it becomes available

CodePudding user response：

Try by converting you variable rooms as observable and just get the reference from the service. In the template You will get a subscription by using Async Pipe.

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

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