如何通过使用角度2选择一个或多个行将一个表值推送到另一个表

Posted 2021-04-06

Hi我目前在这里有一个需求问题，我正在尝试显示这两个表。

表一数据：

TableOne =[
  {
    "Id": 1,
    "Name": "ONLINE",
    "Status": false,
    "Track": false,
  },
  {
    "Id": 2,
    "Name": "ONLINE",
    "Status": false,
    "Track": true,
  },
  {
    "Id": 3,
    "Name": "DEAL",
    "Status": true,
    "Track": false,

  },
  {
    "Id": 4,
    "Name": "OFFLINE",
    "Status": false,
    "Track": false,

  },

]

表2数据：

Tab =[
  {
    "Id": 1,
    "Name": "ONLINE",
    "Status": false,
    "Track": false,
  },
  {
    "Id": 2,
    "Name": "ONLINE",
    "Status": true,
    "Track": false,
  },
  {
    "Id": 3,
    "Name": "DEAL",
    "Status": true,
    "Track": false,

  },
]

表一

Id  Name    Status  Track
1   ONLINE      false
2   ONLINE      true
3   DEAL        false
4   OFFLINE     false
Table two

Id  Name    Status  Track
1   ONLINE      false
2   ONLINE      false
3   DEAL        false

这是我面临的问题：如何使用复选框选择获取多个表行值之一？按下按钮，如何将表格的选定值推送到表格2？也

1. 从表1中选择行并将其推送到表2
2. 假设表一有名称：在线和表二有名称：离线具有相同的ID号，它会覆盖它吗？
3. 单击按钮后，如何在该按钮上单击所选行的值？

下面是我的stackblitz链接。

https://angular-mf2re7.stackblitz.io

答案

根据评论编辑：

1

首先，我们应该创建将存储每个表中的选定项的数组：

  readonly TableOneSelections = [];
  readonly TabSelections = [];

用户检查/取消选中记录后，我们将调用将从选择列表中添加/删除记录的功能

  <input type="checkbox" (change)="onSelectionChanged($event, D, TableOne)"></td> //first table
  <input type="checkbox" (change)="onSelectionChanged($event, D, Tab)"></td> //second table

功能实现：

  onSelectionChanged(event, record, table) {
    const selections = table === this.TableOne ? this.TableOneSelections : this.TabSelections;
    event.target.checked
      ? selections.push(record)
      : selections.splice(selections.findIndex(selection => selection.Id === record.Id), 1)
  }

然后我们可以创建用于移动所选记录的按钮。单击每个按钮将调用moveSelectedRecords函数，该函数将所选记录移动到另一个表。

<button (click)="moveSelectedRecords(TableOne, Tab)">Move down</button> //first table
<button (click)="moveSelectedRecords(Tab, TableOne)">Move up</button> //second table

执行moveSelectedRecords功能：

  moveSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      toTable.push(removedRecord);
    });
    selections.length = 0;
  }

2

使用（1）记录中提到的具有相同Id的函数将不会被覆盖。如果我们想要这样做，我们可以使用略微修改的功能：

  moveAndOverwriteSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      const indexInSecondTable = toTable.findIndex(record => record.Id === removedRecord.Id);
      indexInSecondTable !== -1
        ? toTable[indexInSecondTable] = removedRecord
        : toTable.push(removedRecord)
    });
    selections.length = 0;
  }

3

您可以创建另一个按钮来调用特定表的函数getSelectedRecords：

<button (click)="getSelectedRecords(TableOne)">Get selected records</button> //first table
<button (click)="getSelectedRecords(Tab)">Get selected records</button> // second table

在函数内部，您可以使用选择数组

  getSelectedRecords(fromTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    console.log(selections)
  }

工作应用程序：https://stackblitz.com/edit/angular-d1smii