CODEWITHSUNDEEP
angulartypescriptangular6
PGH
PGH

Reputation: 2204

To Push new object to table component

I have an api called customers,inside this i have id's of the other api called workers based on this id's i am displaying workers of the particular customer in the table like this: enter image description here

When i hit the edit button, it will display the same workers in an dialog component called edit. Where it will display the same workers in the table like this:

enter image description here

Here for the workers(table) i am checking the duplicates and pushing the more workers from the dropdown as shown in above image, this dropdown is an another component called workers-list

In edit component i have an form to generate a new customer, Where i will generate a new customer and i am pushing that generated new customer to the workers table.

enter image description here

Now the issue is i am able to push this new customer to the table, I can log and see that it has been pushed to the table, but it is not reflecting in the table.

DEMO

Upvotes: 1

Views: 328

Answers (2)

Armin
Armin

Reputation: 149

Please add following code at end of onAdd method. 

if (this.customerWorkers.items) {
  this.customerWorkers.items.push(this.addeNewWorker);
  this.customerWorkers = new DataSourceItems(this.customerWorkers.items);
}
else {
  this.customerWorkers.push(this.addeNewWorker);
  this.customerWorkers = new DataSourceItems(this.customerWorkers);
}

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

you need to create a separate class to maintan the datasource. lets call it DataSourceItem

export class DataSourceItems extends DataSource<any> {

  constructor(private items) {
    super();
  }

  connect(): Observable<any> {
    return of(this.items);
  }

  disconnect() {
    // No-op
  }

}

Now once you update the array object. create a instance of this class to datasource

public onAdd(): void {
    this.addeNewWorker = this.addWorkerForm.value; 
    this.addeNewWorker.id = '05';
      this.customerWorkers.push(this.addeNewWorker);
      console.log(this.customerWorkers); // Since it won't geenrate a new ID so iam harcoding the ID
      this.customerWorkers = new DataSourceItems(this.customerWorkers);  
    }

}

Demo

Upvotes: 1

Related Questions