使用角度材料以角度从两个表之间传输行数据 [英] Transferring row data from between two tables in angular using angular material

问题描述

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

I have created a sample angular app where I have taken TableComponent as my main page and also I have a popup in the TableComponent.

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

When I click on the OpenPopup button in my main page I get a Popup window with two tables.

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

The first table has a list of data rows and my second table is empty. When I transfer the rows from my first table to second table and click on save button ,the data rows from second table is displayed on the main page table.

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

But my issue is when I am opening the popup for the second time , the second table is not showing the earlier selected rows and is empty.

请访问我的示例应用在这里..

有人可以告诉我我在这里缺少什么吗...?

can anybody please suggest me what I am missing here...?

推荐答案

ELEMENT_DATA 是类 OpenPopup 范围之外的 CONST，这就是为什么当你完成拼接 this.checkedData.splice(index,1) 你本质上改变或修改 ELEMENT_DATA 常量中的数据并维护状态.

ELEMENT_DATA is a CONST outside of the scope of class OpenPopup, this is why when you complete the splice this.checkedData.splice(index,1) you are essentially mutating or modifying the data in the ELEMENT_DATA const and it is maintaining the state.

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

class OpenPopup gets instantiated everytime you open the popup and because your are doing the following you are re-initializing the checkedDataSource as [] when the popup opens.

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

修订:

您需要为checkedData 复制ELEMENT_DATA.

You will need to replicate ELEMENT_DATA for checkedData.

• 将以下内容添加到您的 stackblitz 示例中即可.

• Adding the following to your stackblitz example works.

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 类中

Then in your OpenPopup class

checkedData = Object.assign(CHECKED_DATA);

这篇关于使用角度材料以角度从两个表之间传输行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！