时间戳

首页 > 解决方案 > 使用角度材料以角度在两个表之间传输行数据

angular - 使用角度材料以角度在两个表之间传输行数据

问题描述

我创建了一个示例 Angular 应用程序，其中我将 TableComponent 作为我的主页，并且我在 TableComponent 中有一个弹出窗口。

当我单击主页中的OpenPopup按钮时，我会看到一个带有两个表格的弹出窗口。

第一个表有一个数据行列表，我的第二个表是空的。当我将第一个表中的行传输到第二个表并单击保存按钮时，第二个表中的数据行显示在主页表上。

但我的问题是当我第二次打开弹出窗口时，第二个表没有显示之前选择的行并且是空的。

请在此处访问我的示例应用程序..

任何人都可以请建议我在这里缺少什么...？

标签： angularangular-material

解决方案

ELEMENT_DATA 是类 OpenPopup 范围之外的 CONST，这就是为什么当您完成拼接 this.checkedData.splice(index,1) 时，您实际上是在改变或修改 ELEMENT_DATA const 中的数据并且它正在维护状态。

每次打开弹出窗口时都会实例化类 OpenPopup 并且因为您正在执行以下操作，所以您在弹出窗口打开时将 checkedDataSource 重新初始化为 [] 。

 checkedData = [];
 checkedDataSource = new MatTableDataSource<Element>(this.checkedData);

修订：

您需要为checkedData 复制ELEMENT_DATA。

  • 将以下内容添加到您的 stackblitz 示例中。

    const ELEMENT_DATA: Element[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }
];

const CHECKED_DATA: Element[] = [];

然后在你的 OpenPopup 类

checkedData = Object.assign(CHECKED_DATA);

推荐阅读