angulartypescriptprimengprimeng-datatable

Mirroring angular-primeng saved data on row

I am adding and updating using angular-primeng table. I can record data without any problem. I get a result from the API application as in the picture.

I'm putting the recorded data in "companyList", but it looks like I marked it on the table. How can I add the last data I registered to the table without refreshing the page?

I want to transfer the information of the data I have just recorded onto the table.

I'm creating a temporary id number that I specify with "x", that is, a local id so that a new line can be created

enter image description here

enter image description here

 companyList: CompanyModel[] = [];
 clonedCompanyList: { [s: string]: CompanyModel } = {};


 addCompany(company: CompanyModel) {
  this.companyService.postCompany(company)
    .subscribe({
      next: (res) => {
         this.companyList.push(res);
         this.companyList = [...this.companyList];
         console.log(this.companyList);
      },
      error: (e) => {
        console.log(e);
      },
      complete: () => {
      }
    })
}

//#Edit
onRowEditInit(company: CompanyModel) {
  this.clonedCompanyList[company.id] = { ...company };
}

//#Save
onRowEditSave(company: CompanyModel) {
  if (!company.id.toString().indexOf('x')){
    this.addCompany(company);
    delete this.clonedCompanyList[company.id];
  } else if (company.id.toString().indexOf('x')) {
    this.putCompany(company);
  }
}
Solution

  • After adding a Company to your list try this.

    this.companyList.push(newCompany);
this.companyList = [...this.companyList]; //Do this