Question

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

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

我已经参考了以下链接：

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

以下是我的尝试。

阶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()
  });
 }

Angular 2定期提取实时数据

1 个答案: