Question

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

当我单击主页上的 OpenPopup 按钮时，我将看到一个包含两个表的弹出窗口。

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

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

有人可以建议我在这里我想念的是什么...吗？

Answer 1

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

每次您打开弹出窗口时，都会实例化

class OpenPopup，并且由于您正在执行以下操作，因此在打开弹出窗口时，您将初始化CheckedDataSource为[]。

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

修订版：

您将需要复制ELEMENT_DATA到checkedData。

将以下内容添加到您的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);

使用角度材料从两个表之间以角度传输数据

1 个答案: