Выдвинуть новый объект в компонент таблицы

Question

У меня есть api, называемый customers, внутри него у меня есть id's другого api, называемого workers, на основании этого id's я отображаю workers of the particular customer в table, как это :

Когда я нажимаю кнопку edit, он отображает тот же workers в компоненте диалога, называемом edit. Где будет отображаться same workers в table, например:

Здесь для рабочих (таблица) Я проверяю дубликаты и выталкиваю больше рабочих из dropdown, как показано на рисунке выше, этот dropdown является другим компонентом, называемым workers-list

В компоненте edit у меня есть form для генерации нового клиента , где я буду генерировать нового клиента и отправляю этого сгенерированного нового клиента в таблицу workers.

Теперь проблема в том, что я могу подтолкнуть этого нового клиента к столу, я могу log и увидеть, что он был перенесен в таблицу, но это не отражается в таблице.

DEMO

Answer 1

Пожалуйста, добавьте следующий код в конец метода onAdd.

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);
}

Answer 2

вам нужно создать отдельный класс для обслуживания источника данных. давайте назовем это DataSourceItem

export class DataSourceItems extends DataSource<any> {

  constructor(private items) {
    super();
  }

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

  disconnect() {
    // No-op
  }

}

Теперь, когда вы обновите объект массива. создать экземпляр этого класса для источника данных

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);  
    }

}

Демо