将新对象推送到表格组件答案

【问题标题】：To Push new object to table component将新对象推送到表格组件
【发布时间】：2019-04-11 13:52:12
【问题描述】：

我有一个api 叫customers，在这个里面我有一个id's 另一个api 叫workers 基于这个id's 我在table 中显示workers of the particular customer 就像这样：

当我点击edit 按钮时，它会在名为edit 的对话框组件中显示相同的workers。它将在table 中显示same workers，如下所示：

这里是工人（表）我正在检查重复项并从dropdown 推送更多工人，如上图所示，这个dropdown 是另一个名为workers-list 的组件

在edit 组件中，我有一个form 来生成一个新客户，我将在其中生成一个新客户，并将生成的新客户推送到workers 表。

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

DEMO

【问题讨论】：

标签： angular typescript angular6

【解决方案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

【讨论】：

【解决方案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);
}

【讨论】：