Задержка в отображении контента на интерфейсе - PullRequest
Новая
       9

Задержка в отображении контента на интерфейсе

0 голосов
/ 10 апреля 2019

У меня есть два компонента в моем угловом проекте. Один из них - компонент формы singleOrder, а другой - отображение всех заказов в виде списка. Если я заполняю форму singleOrder и нажимаю на кнопку отправить, то должен создать экземпляр компонента 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);
});}

Я показываю список заказов в моем интерфейсе. Поскольку я использую события до тех пор, пока я не нажму кнопку отправить из первого компонента, мое поле «Список заказов» будет пустым и ничего не будет отображаться в пользовательском интерфейсе.

У меня есть код ниже, который разделит список заказов по страницам, как показано ниже 

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);

}

Я использую эту переменную 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 заказов в моей БД, и, добавив еще один из первого компонента, заполнив форму, я ожидаю, что всего 11 заказов в пользовательском интерфейсе. Но я получаю только 10. Без обновления всей страницы, есть ли решение для этого, поскольку обновление займет много времени.

Попытка дать некоторую задержку в первом компоненте, как показано выше в комментариях, но не помогла.

1 Ответ

0 голосов
/ 10 апреля 2019

Здесь проблема заключается в получении записи перед сохранением, поэтому вам необходимо подписаться на метод вставки записи 

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

Итак, как только вы закончите вставку, вызовите событие

...