Angular自动刷新数据

Question

我正在尝试制作一个管理面板，用户可以在其中实时查看其餐厅的预订情况。这个想法是让新预订自动显示在预订组件中，而无需刷新页面。我正在使用异步管道，它会显示数据库中的所有预订，但不会自动刷新。

这是预订服务

@Injectable()

export class BookingService{

    public url:string;
    public booking:Booking;

        constructor(
            private _http: HttpClient
            ){
            this.url= global.url;
        }

makeBooking(booking){

    let headers= new HttpHeaders().set('Content-type','application/x-www-form-urlencoded'); 

    let json= JSON.stringify(booking);

    let params='json='+json;

    return this._http.post(this.url+ 'booking',params, {headers:headers});
}

getBookings():Observable<any>{
    let headers= new HttpHeaders().set('Content-type','application/x-www-form-urlencoded'); 

    return  this._http.get(this.url+ 'booking/0',{headers:headers});
}

现在组件

@Component({
  selector: 'app-turnos',
  templateUrl: './bookings.component.html',
  styleUrls: ['./bookings.component.css'],
  providers:[BookingService]
})
export class BookingsComponent implements OnInit {

    public bookings;
    public status;
    public bookings$: Observable<any>;

  constructor(

    private _bookingService: BookingService

    ) {}

  ngOnInit(): void {


       this.bookings$=this._bookingService.getBookings().pipe(map(res=>this.bookings=res.bookings));
    }


}

最后，在我使用的模板上

<tr *ngFor="let booking of (bookings$ | async) ">
      <th scope="row">{{booking.id}}</th>
      <td>{{booking.user_name}}</td>
       etc 
       etc
 </tr>

Answer 1

如果要刷新页面上的数据，假设每 10 秒刷新一次，则必须 timer() 和 switchMap()。

timer(0, 10000)
.pipe(
  switchMap(() => this._bookingService.getBookings())
).subscribe(res => this.bookings=res.bookings)

timer 用于在一定时间后发出值，在您的情况下，从 0 开始（立即发出值）。然后你使用 switchMap 到 return 你的 observable。一旦您订阅它，每十秒，您的页面将被刷新。

Answer 2

您当前正在发送单个 HTTP GET 请求以检索预订，该请求确实检索了当前预订。要获得预订更新，您有多种选择：

HTTP 轮询： 每隔一段时间发送一个新的 HTTP 请求，例如每 5 秒获取一次更新。 Here's a quick tutorial for angular & rxjs

服务器发送事件 (SSE)： 发送单个请求并保持 HTTP 连接打开，并仅从服务器实时获取更新（服务器到客户端通信） . Here's a quick tutorial for Angular + NodeJs

我会使用 SSE 来限制对服务器的调用。还有另一种流行的选择，即使用 WebSockets，它们的工作方式与 SSE 相同，但也允许客户端到服务器的通信，它们主要用于实时聊天。

Angular自动刷新数据

Angular refresh data automatically

asynchronous

refresh

real-time

observable

angular