在 ngOnInit() 中执行 POST 请求后如何刷新 HTML table？

Question

访问组件 invoices.ts 后，它会在后台查找一些更新并将它们应用到现有的更新。否则，当用户没有现有发票时，它将执行 POST 请求来创建它们。但是，当用户访问组件时 POST 和 PUT 操作在 ngOnInit() 中被调用，我仍然看到一个空的 table 直到我刷新页面。如何在不使用 `window.location.reload()' 的情况下自动刷新 HTML table 以填写新开具的发票？

invoice.component.ts

  ngOnInit() {

  this.auth.getProfile().subscribe((profile : any) => {
  this.userName = profile.user.username;
  this.email = profile.user.email;
}

  this.getAndUpdateInvoices();
}


getAndUpdateInvoices() {

   this.invoiceService.getInvoicesn().subscribe((data : any) => {
     this.invoices= data.invoice;

      this.createUpdate();

})


createUpdate() {

  this.createInvoice({
              client: data.Client,

 ***etc
  })
}


createInvoice(invoice) {
this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
  if (!data.success) {
    console.log(data.message);
  } else {
    console.log(data.message);
  }
});
 }


 this.invoiceService.updateInvoice(this.invoice).subscribe((data: any) => {
              if (!data.success) {
                console.log(data.message);              
              } else {
                console.log(data.message);
              }
            });

}

在我的 invoice.component.html:

<tr *ngFor="let invoice of invoices"  >
<td> {{invoice.hours}} </td>

如果您需要更多信息，请告诉我

Answer 1

只需在此处调用用于从您的服务 class 获取所有数据的方法：

createInvoice(invoice) {
    this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
        if (!data.success) {
            console.log(data.message);
        } else {
            console.log(data.message);

           -----HERE----

        }
    });
}

在 ngOnInit() 中执行 POST 请求后如何刷新 HTML table？

How do I refresh HTML table after performing POST request in ngOnInit()?

html

post

ngoninit

angular