操作多个复选框选择代码如何工作？答案

【问题标题】：How does manipulating multiple checkbox selection code work?操作多个复选框选择代码如何工作？
【发布时间】：2019-08-26 00:56:08
【问题描述】：

我正在关注ag-grid的官方教程：

https://www.ag-grid.com/angular-getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github

我到达了必须处理有关选定复选框的信息的部分。但是，文档并不详细；它没有解释代码实际上是如何工作的。也许，这是有道理的，因为详细解释不是他们的工作。但是，对于像我这样在使用 Angular 技术方面没有扎实经验并且想要真正了解事物如何工作的人来说，这很麻烦！

在 html 文件中，我被要求添加以下内容：

<button (click)="getSelectedRows()">Get Selected Rows</button>

在 app.component.ts 中，我被要求添加以下内容：

getSelectedRows() {  
        const selectedNodes = this.agGrid.api.getSelectedNodes();   
        const selectedData = selectedNodes.map(node => node.data);   
        const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');   
        alert('Selected nodes: ${selectedDataStringPresentation}');   
    }

如果有人可以解释打字稿代码的确切作用，那将是非常慷慨的。谢谢！

【问题讨论】：

标签： javascript angular typescript ag-grid ag-grid-ng2

【解决方案1】：

我猜agGrid 是存储模拟值的服务，它只是从某个地方获取一组数据。
selectedData 是另一个数组，它是通过转换（转换数组同时提供新的引用，因此不修改原始数组）selectedNodes 数组并仅选择每个节点的数据属性而创建的。
selectedDataStringPresentation 是一样的，但这次它通过合并来自selectedData 的每个对象的属性make 和model 来提供一个格式化字符串数组。

您可能没有掌握这里使用的 ES6（JavaScript 标准）函数的用法，尤其是 map() 函数。

这里是数组的map()函数的官方文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

简单解释，它是一个遍历数组的函数，并通过应用映射中声明的函数来转换每个对象，并将结果返回到一个新数组中。

如果你以selectedData为例，你可以把操作翻译成这样：

遍历selectedNodes的每个对象，只返回当前对象的data属性。将结果推送到新数组中。

当您想要处理用于不同目的的不同数组时，这尤其有用。例如，假设您有一个包含对象列表的服务。后端服务将为您提供一组数字，代表您在服务中拥有的对象的 ID。

然后，您可以使用 map() 函数轻松地将 ID 数组转换为存储在服务中的对象数组。

【讨论】：

【解决方案2】：

该死的@Alex Beugnet(upvote) 击败了我！反正我会发帖，因为我正在写这一切。

首先我不确定您已经了解多少 TypeScript，如果其中很多变得微不足道，我深表歉意，其目的只是为了确保在理解逻辑时最大限度地澄清问题。

在指南的“启用选择”部分，您实际上是在网格中启用多行选择，并让按钮从这些选定的行中返回数据。

为了查看 getMultipleRows() 函数发生了什么，最好通过浏览器中提供的调试器将其可视化，我正在使用 Chrome 开发人员工具（按 F12），我强烈推荐它以了解什么发生在逻辑中。

const selectedNodes

让我们从选择 2 行开始，我选择了 Porsche Boxster 72000 和 Ford Mondeo 32000。选择它们后，我点击触发 getSelectedRows() 函数的“Get Selected Rows”按钮：

const selectedNodes = this.agGrid.api.getSelectedNodes();

上面的行是从 AgGrid 中为 RowNodes 分配常量变量 'selectedNodes'。在这里，您使用 AgGridNg2 方法 getSelectedNodes() 来返回选定的节点数据，您将返回一个数组，格式为：

[RowNode, RowNode] //(each for the row we have selected)

查看我们得到的 RowNode：

这些是 AgGrid 框架提供的所有 RowNode 属性，您可以忽略所有这些对象属性，因为您只关心“数据”属性，您将在下一行代码中看到！

const SelectedData

const selectedData = selectedNodes.map(node => node.data);

这里我们将 'selectedData' 设置为 RowNode.data 的数组，基本上是试图从 RowNodes 中获取数据属性到一个数组中。上面这行基本上可以假设为：

let selectedData = [];

for (let i = 0; i <= selectedNodes.length - 1; i++){
    selectedData[i] = selectedNodes[i].data;
}

我们只是试图将数据属性放入一个新的常量变量“selectedData”中。查看文档以更好地理解这一点：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const selectedData 将返回为：

[
    {
        make: "Porsche",
        model: "Boxster",
        price: 72000,
    },
    {
        make: "Ford",
        model: "Mondeo",
        price: 32000
    }
]

const selectedDataStringPresentation

const selectedDataStringPresentation = selectedData.map( node => node.make + ' ' + node.model).join(', ');

我们采用 selectedData 数组并将 Make 和 Model 连接为数组的单个元素，并在末尾添加一个逗号。我们会得到“Porsche Boxter, Ford Mondeo”。

let selectedData = [
	{
		make: "Porsche",
		model: "Boxster",
		price: 72000,
	},
	{
		make: "Ford",
		model: "Mondeo",
		price: 32000
	}
]

let selectedDataStringPresentation = [];

for (let i = 0; i <= selectedData.length - 1; i++){
	selectedDataStringPresentation[i] = selectedData[i].make + ' ' + selectedData[i].model;
}

selectedDataStringPresentation = selectedDataStringPresentation.join(', ');

console.log(selectedDataStringPresentation);

警报()

最后一行

alert('Selected nodes: ${selectedDataStringPresentation}');

您将在浏览器中发送一个警报，该警报将显示 selectedDataStringPresentation 数组。

【讨论】：