在不刷新页面的情况下更新数据库中的值更改 Angular UI

Question

每当数据库中的值发生更改时，我都想在不刷新页面的情况下更新 UI。我正在使用 http get 获取 onInIt() 上的数据。假设我在数据库“状态”中有一个字段，它在数据库中从“活动”更改为“非活动”。如何在不刷新页面的情况下在 UI 上反映它的更新值？ 这是我的服务和组件的样子：

emailChannelService.ts

  getAllEmailChannels(){
return this.http.get(this.url).pipe(
  map(data=>{
    const emailChannelArray: Array<any> = [];
    for (const id in data){
      if(data.hasOwnProperty(id)){
        emailChannelArray.push(data[id]);
      }
    }
    return emailChannelArray;
  })
);}

component.ts

      ngOnInit() {
    this.emailChannelService.getAllEmailChannels().subscribe(
    data=>{
      this.channels=data;
    },error=>{
      console.log(error);
    }
  )
}