在 UI 上延迟显示内容

Question

我的 angular 项目中有两个组件。一个是 singleOrder 表单组件，另一个组件是将所有订单显示为列表。如果我填写 singleOrder 表单并单击提交，它应该实例化 orderList 组件，该组件将通过 API 调用在内部从 DB 获取数据。对于该功能，我使用了 EventEmitter。

我的 singleOrder 组件如下所示。

onSubmit(form: NgForm) { // in submit button I am calling this 
console.log(form);
this.insertRecord(form); // inserts an order in DB through an API
// this.service.wait(7000); // wait function
this.service.OrderEvent.emit(); // here it initialize the second component

}

我的 OrderList 组件如下所示。

ngOnInit() {
console.log("ngoninit");
this.service.OrderEvent.subscribe(() => { // fetching data from DB
  console.log("order event");
  this.service.refreshList()
    .subscribe(
      data => {
        this.Orderlist = data; // displaying on UI
        this.orderCollectionSize = this.Orderlist.length;
      }
    );
    console.log(this.Orderlist);
});}

我正在 UI 上显示订单列表。当我使用事件直到我从第一个组件单击提交时，我的订单列表字段将为空并且 UI 上不会显示任何内容。

我有下面的代码，它将订单列表拆分为如下页面

get Orders(): SingleOrder[] {
// console.log(this.Orderlist);
if (!this.Orderlist) { return; }
return this.Orderlist
  .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);

}

我在 UI 上使用这个 Orders 变量，如下所示

<tr *ngFor="let order of Orders ">
    <!-- <mat-checkbox></mat-checkbox> -->
    <td (click)="openDialog(order)">{{order.orderId}}</td>
    <td (click)="openDialog(order)">{{order.orderStatus}}</td>
    <td (click)="openDialog(order)">{{order.paymentMethod}}</td>
    <td (click)="openDialog(order)">{{order.orderTotal}}</td>
    <td (click)="openDialog(order)">{{order.orderSubtotal}}</td>
    <td (click)="openDialog(order)">{{order.orderTax}}</td>
    <td (click)="populateForm(order)">{{order.orderShippingCharges}}</td>
  </tr>

假设我的数据库中已有 10 个订单，并通过填写表格从第一个组件插入一个订单，我预计在 UI 上总共有 11 个订单。但是我只有10个。如果不刷新整个页面，有没有解决这个问题的方法，因为刷新会花费很多时间。

如上评论所示，尝试在第一个组件中提供一些延迟，但没有帮助。

Answer 1

这里的问题是在保存之前获取记录所以你需要订阅插入记录方法

this.insertRecord(form).subscribe(result=> { 
this.service.OrderEvent.emit(); 
}, err=> {});

所以一旦你完成插入然后引发事件

在 UI 上延迟显示内容

Delay in displaying the content on UI

angular

eventemitter