Angular 2定期提取实时数据

Question

我已经开发了一个应用程序，该应用程序基本上是在单独的端口中运行的admin和客户端门户，当从客户端端下订单时，管理员仪表板应能够显示新订单。

基本上必须刷新视图以保持更新的UI。

我已转介以下链接：

http://beyondscheme.com/2016/angular2-discussion-portal

以下是我尝试的。

order-issue.component.ts

ngOnInit() {
const user_id = {
  user_ids: this.user_id
};
// To display the Pending Orders into the table
this.orderService.getAllOrders("Pending").subscribe(data => {
  if (data.success && data.Allorders.length != 0) {
    for (let i = 0; i < data.Allorders.length; i++) {
      this.orderService
        .getOrderItemsByNo(data.Allorders[i].orderNo)
        .subscribe(subData => {
          data.Allorders[i].orderItems = subData;
        });
    }
    this.source = data.Allorders; //To display the data into smart table
    this.refreshData();    //For real time refresh
  } else {
    this.flashMessage.show("No Pending Orders", {
      cssClass: "alert-success",
      timeout: 300000
    });
  }
});
  private refreshData(): void {
    this.commentsSubscription = this.orderService.getAllOrders("Pending").subscribe(data => {
    this.data = data;
    console.log(data);   //able to see the new orders
    this.subscribeToData();
  });

private subscribeToData(): void {
    this.timerSubscription = Observable.timer(5000).first().subscribe(() => this.refreshData());
 }

我的服务( orderService (将获得所有订单：

  getAllOrders(status) {
   let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post(`${BASE_URL}/orders/getAllOrdersWithItems`, { status: status }, { headers: headers })
    .map(res => res.json());
  }

Answer 1

好吧，我能够使用以下更改进行修复。

//Function which refreshes the data in real time without page refresh
private refreshData(): void {
this.commentsSubscription = this.orderService.getAllOrders("Pending").subscribe(data => {
    this.source = data.Allorders;   //Updated here! and it worked
    console.log(this.source);
    this.subscribeToData(); //On success we call subscribeToData()
  });
 }