在 UI 上延迟显示内容
Delay in displaying the content on UI
我的 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个。如果不刷新整个页面,有没有解决这个问题的方法,因为刷新会花费很多时间。
如上评论所示,尝试在第一个组件中提供一些延迟,但没有帮助。
这里的问题是在保存之前获取记录所以你需要订阅插入记录方法
this.insertRecord(form).subscribe(result=> {
this.service.OrderEvent.emit();
}, err=> {});
所以一旦你完成插入然后引发事件
我的 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个。如果不刷新整个页面,有没有解决这个问题的方法,因为刷新会花费很多时间。
如上评论所示,尝试在第一个组件中提供一些延迟,但没有帮助。
这里的问题是在保存之前获取记录所以你需要订阅插入记录方法
this.insertRecord(form).subscribe(result=> {
this.service.OrderEvent.emit();
}, err=> {});
所以一旦你完成插入然后引发事件