Чтобы подтолкнуть объекты к компоненту таблицы в угловых

Question

Сценарий: У меня есть 2 API под названием customers и workers, я отображаю все свои customers и их assigned workers, используя таблицу в компоненте с именем customers как на изображении ниже:

Когда я нажимаю редактировать кнопку определенного клиента ,Я внедряю значения этого конкретного объекта клиента (бывшего клиента 1) в другой компонент с именем edit (компонент диалогового окна) , где я отображаю введенные customer свойства (name,email) и assigned worker properties(name,email,phone) в таблица .как показано на рисунке ниже:

Как показано на втором изображении, я поместил еще один компонент (список рабочих) внутри edit *Компонент 1036 *, который будет отображать всех работников в раскрывающемся списке:

Ожидаемый результат:

• Теперь я хочу подтолкнуть этих выбранных рабочих из компонента workers-list в таблицу, присутствующую в компоненте edit, например:

Пример изображения: Worker 2 выбирается из dropdown и добавляется в таблицу в edit компоненте нажатием кнопки Add.

• Itне следует добавлять дубликаты.

Я получаю emitted workers в edit компоненте, но я не могу проверить дубликаты и не могу push the новых работников до table.

Поскольку компонентов много, я даю stackblitz ссылку .

Answer 1

Пожалуйста, взгляните .Чтобы перерисовать таблицу, вам нужно создать новый массив, подобный этому:

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

Чтобы пропустить пустые значения (и не добавлять их в таблицу), вы можете использовать фильтр по теме, например:

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

Также вам необходимо сопоставить работников перед отправкой их на службу, например:

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

Надеюсь, что это поможет.