自动角度刷新数据

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

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

HTTP Polling：每次发送新的HTTP请求，例如每5秒更新一次。 Here's a quick tutorial for angular & rxjs

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

我将使用SSE限制对服务器的调用。还有一个流行的选择，那就是使用WebSocket，它们与SSE相同，但是也允许客户端到服务器的通信，它们主要用于实时聊天。

Answer 2

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

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

timer用于在您开始的情况下（在您的情况下，从0开始）发出一定时间后发出值（立即发出值）。然后，您使用switchMap返回可观察值。订阅后，每十秒钟将刷新您的页面。