Question

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

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

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

在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}');   
    }

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

Answer 1

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

您可能不了解的是此处使用的ES6（JavaScript标准）函数的用法，尤其是map()函数。

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

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

如果以selectedData为例，则可以将操作转换为：

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

当您要处理具有不同用途的不同阵列时，这特别有用。例如，假设您有一个包含对象列表的服务。后端服务将为您提供一系列数字，代表您在服务中拥有的对象的ID。

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

Answer 2

该死的@Alex Beugnet（upvote）击败了我！无论如何，我还是要写这篇文章。

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

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

为了查看getMultipleRows（）函数的情况，最好通过浏览器中提供的调试器对其进行可视化，我使用的是Chrome开发人员工具（按F12键），我强烈建议您使用它来理解什么在逻辑上发生。

const selectedNodes

让我们从选择2行开始，我选择了Porsche Boxster 72000和Ford Mondeo32000。选择它们之后，我单击“ Get Selected Rows”按钮，该按钮触发getSelectedRows（）函数：

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

上面的行是为AgGrid中的RowNodes分配常量变量“ selectedNodes”。在这里，您将使用AgGridNg2方法getSelectedNodes（）返回选定的节点数据，该数据将以以下形式返回：

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

查看RowNode我们得到：

这些都是AgGrid框架提供的所有RowNode属性，您可以忽略所有这些对象属性，因为您只关心'data'属性，就像您在下一行代码中看到的一样！

const SelectedData

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

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

let selectedData = [];

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

我们只是试图将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，福特蒙迪欧”。

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（）

最后一行

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

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

如何处理多个复选框选择代码？

2 个答案:

const selectedNodes

const SelectedData

const selectedDataStringPresentation

alert（）