Блог

Я следую официальному руководству ag-grid:

https://www.ag-grid.com/angular-getting-started/?utm_source=ag-grid-readmeamp;utm_medium=repositoryamp;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}');   
    }  
  

Если бы кто-нибудь мог объяснить, что именно делает код typescript, это было бы очень щедро.
Спасибо!

• Я предполагаю, agGrid что служба, хранящая ваши фиктивные значения, просто получает массив данных откуда-то.
• selectedData это другой массив, который создается путем преобразования (преобразует массив, предоставляя новую ссылку, таким образом, не изменяя исходный массив) selectedNodes массива и только выбирая свойство данных каждого узла.
• selectedDataStringPresentation то же самое, но на этот раз оно предоставляет массив форматированных строк путем объединения свойств make и model каждого объекта из selectedData .

Чего вы, вероятно, не понимаете, так это использования функций ES6 (стандарт JavaScript), которые используются здесь, и особенно map() функции.

Вот официальная документация map() функции для массивов: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Проще говоря, это функция, которая выполняет итерацию по массиву и преобразует каждый объект, применяя функцию, объявленную в map, возвращая результаты в новом массиве.

Если вы возьмете пример selectedData , вы можете перевести операцию в это :

• Выполните цикл над каждым объектом selectedNodes и верните только свойство data текущего объекта. Поместите результаты в новый массив.

Это особенно полезно, когда вы хотите работать с разными массивами, которые служат разным целям. Например, представьте, что у вас есть служба, которая содержит список объектов. Серверная служба предоставит вам массив чисел, представляющих идентификаторы объектов, которые у вас есть в вашем сервисе.

Затем вы можете использовать map() функцию, чтобы легко преобразовать массив идентификаторов в массив ваших объектов, хранящихся в вашем сервисе.

Черт возьми, @Alex Beugnet (поддерживающий) опередил меня в ударе! Я все равно собираюсь опубликовать пост, поскольку был в середине написания всего этого.

Во-первых, я не уверен, сколько из TypeScript вы уже знаете, я прошу прощения, если многое из этого становится тривиальным, цель состоит только в том, чтобы обеспечить максимальное разъяснение вопроса в понимании логики.

В части «Включить выбор» руководства вы, по сути, включаете выбор нескольких строк в сетке и заставляете кнопку возвращать данные из этих выбранных строк.

Чтобы увидеть, что происходит с функцией getMultipleRows(), было бы лучше всего визуализировать это с помощью отладчика, предоставляемого в браузерах, я использую Chrome Developer Tools (нажмите F12), я бы настоятельно рекомендовал это для понимания того, что происходит в логике.

const selectedNodes

Давайте начнем с выбора, скажем, 2 строк, я выбрал Porsche Boxster 72000 и Ford Mondeo 32000. После их выбора я нажимаю на кнопку «Получить выбранные строки», которая запускает функцию getSelectedRows():

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

Приведенная выше строка присваивает постоянной переменной ‘selectedNodes’ RowNodes из AgGrid. Здесь вы используете метод AgGridNg2 getSelectedNodes() для возврата выбранных данных узла, которые вам будут возвращены в виде массива:

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

Просматривая RowNode, мы получаем:

Это все свойства RowNode, предоставляемые платформой AgGrid, вы можете игнорировать все эти свойства объекта, поскольку вас интересует только свойство ‘data’, как вы увидите в следующей строке кода!

const SelectedData

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

Здесь мы устанавливаем ‘selectedData’ как массив RowNode.data, в основном пытаясь получить свойство data из RowNodes в массив.
Приведенную выше строку в основном можно считать:

 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, 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.