To push objects to table component in angular

Question

Scenario: I have 2 api's called customers and workers, I am displaying all my customers and their assigned workers using table in an component called customersas in below image:

When i click on edit button of particular customer, I am injecting that particular customer object(Ex Customer 1) values to an another component called edit(dialog component),where i am displaying injected customer properties(name,email) and the assigned worker properties(name,email,phone) into the table. as in below image:

As shown in the second image i have placed an another component(workers-list)inside the edit component which will show all workers in the dropdown:

Expected Result:

Now i want push those selected workers from workers-list component to table present in the edit component like this:

Ex pic: Worker 2 selected from the dropdown and gets added to table in edit component by clicking Add button.

It should not add duplicates.

I am receiving emitted workers in edit component, but i am unable verify duplicates and i am unable push the new workers to table.

Since components are many, I am giving stackblitz link.

You want to push the worker into the edit table or into the main table? — Amir Arbabian
– Amir Arbabian, Commented Feb 26, 2019 at 5:54
@Shankar Check this if the problem is still there:stackblitz.com/edit/… — Prashant Pimpale
– Prashant Pimpale, Commented Feb 26, 2019 at 7:19
Now i am not facing any duplicate issue, but after deleting an paricular worker object i am facing duplicate issue — SGR
– SGR, Commented Feb 26, 2019 at 7:25

Amir Arbabian · Accepted Answer · 2019-02-26 06:10:30Z

1

Please take a look. To rerender table you need to create a new array like that:

this.customerWorkers = [...this.customerWorkers, ...value];

To skip empty values (and not add them to table), you can use filter on subject like:

this.dataService.onSelectWokers.pipe(
     filter(x => x)
   )

Also you need to map workers before pushing them to service, example:

const workersMap = this.addForm.value.workerIds;
const workersArray = Object.keys(workersMap).map(x => workersMap[x]);

Hope that helps.

answered Feb 26, 2019 at 6:10

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SGR Over a year ago

I left with one more requirement,now duplicated are adding how can avoid it.?

Amir Arbabian Over a year ago

Like that, using uniqueness filter by id.

Amir Arbabian Over a year ago

No problem, I'm glad that it helped.

Collectives™ on Stack Overflow

To push objects to table component in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related