Angular自动刷新数据

Angular refresh data automatically

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

这是预订服务

@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>

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

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

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

您当前正在发送单个 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 相同,但也允许客户端到服务器的通信,它们主要用于实时聊天。