angular - 以角度将对象推送到表格组件

Question

场景：我有 2 个 api 被调用customers，workers我在一个名为的组件中显示我的所有customers和它们的assigned workers使用 表customers，如下图所示：

当我单击特定客户的编辑按钮时，我将该特定客户对象（前客户 1）值注入到另一个名为编辑（对话框组件）的组件中，我在其中显示注入的属性和表。如下图：customer(name,email)assigned worker properties(name,email,phone)

如第二张图片所示，我在编辑组件中放置了另一个组件（工人列表），它将在下拉列表中显示所有工人：

预期结果：

• 现在我想将这些选定的工作人员从workers-list组件推送到组件中存在的表，edit如下所示：

Ex pic：Worker 2从 中选择并通过单击按钮dropdown添加到组件中的表中。editAdd

• 它不应该添加重复项。

我收到emitted workers了edit组件，但我无法验证重复项，我也无法让push新员工table.

由于组件很多，我给出了stackblitz link。

标签： angulartypescriptangular-materialangular6

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

希望有帮助。