将新对象推送到表格组件

Question

我有一个名为api的{​​{1}}，在此基础上，我基于这个customers有另一个id's的{​​{1}} {正在api中显示workers，如下所示：

当我按下id's按钮时，它将在名为workers of the particular customer的对话框组件中显示相同的table。它将在edit中显示workers的位置，如下所示：

在这里为工作人员（表）我正在检查重复项，并从edit推动更多的工作人员，如上图所示，此same workers是另一个组件称为table

在dropdown组件中，我有一个dropdown生成一个新客户，在这里我将生成一个新客户，并将该新客户推到{{ 1}}表。

  

现在的问题是我能够将这个新客户推到桌子上，我可以登录，并看到它已经被推到桌子上，但是没有反映在桌子上。 / p>

DEMO

Answer 1

您需要创建一个单独的类来维护数据源。让我们称之为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);  
    }

}

Demo

Answer 2

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