Question

我的角度项目中有两个组成部分。一个是singleOrder表单组件，另一个是将所有订单显示为列表。如果我填写singleOrder表单并单击Submit，则应实例化orderList组件，该组件将通过API调用从数据库内部获取数据。对于该功能，我使用了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

这里的问题是保存之前获取记录，因此您需要订阅插入记录方法

function grab_vimeo_thumbnail($vimeo_url){
    if( !$vimeo_url ) return false;
    $data = json_decode( file_get_contents( 'http://vimeo.com/api/oembed.json?url=' . $vimeo_url ) );
    if( !$data ) return false;
    return $data->thumbnail_url;}

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

延迟在UI上显示内容

1 个答案: