Question

您好我现在有一个需求问题，我正在尝试显示这两个表。

表一数据：

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

以下是我遇到的问题：如何使用复选框选择获取多个表行值之一？按下按钮，如何将表格的选定值推送到表格二？ 还

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

以下是我的stackblitz链接。

https://angular-mf2re7.stackblitz.io

Answer 1

根据评论编辑：

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

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

  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

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

1 个答案: