Question

我已经实现了一个示例角度应用程序，其中我使用了一个弹出组件。

在我的弹出组件中，我使用了两个表，第一个表包含列表数据行，第二个表为空。

我已经实现了表之间的交换功能。

在第一个表上单击移至第二个表按钮时，应将所选行转移到第二个表。

然后点击第二张表上的移至第一张表按钮，所选行应被转移到第一张表中。

但是在交换数据行时遇到问题。如果我在第一个表中执行selectAll并单击移至第二个表按钮，则行将被合并。

但是最初在打开弹出窗口后，如果我只是选择2或3行并进行传输，则所选的行将被传输，但是第一个表中的其余行将被删除.....！

请访问我的sample app here

任何人都可以告诉我我在想什么.....？

Answer 1

在moveToSecondTable()函数中，您的数据复制操作依赖于不存在的isSelected属性，因此isSelected === false检查失败，因为undefined不等于false。您可以通过使用不太严格的比较并检查诸如isSelected == false或!isSelected之类的真实性来轻松解决此问题：

this.dataSource = new MatTableDataSource<Element>(this.uncheckedData.filter(x => !x.isSelected));

但是问题的根本原因在于，在Element中定义的数据模型不包含isSelected属性。最好的解决方法是将属性添加到模型中并提供默认值：

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  isSelected: boolean
}

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

使用角度材质以角度在两个表之间交换数据行

1 个答案: