Как работает манипулирование кодом выбора нескольких флажков? - PullRequest
1 голос
/ 04 апреля 2019

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

https://www.ag -grid.com / angular-Getting-Start /? Utm_source = ag-grid-readme & utm_medium = хранилище & 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}');   
    }  

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

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Darn @Alex Beugnet (upvote) победил меня!Я собираюсь опубликовать в любом случае, как я был в середине написания всего этого.


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

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

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

const selectedNodes

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

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

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

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

Глядя в RowNode, мы получаем:

selectedNodes value

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

const SelectedData

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

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

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 и объединить марку и модель как один элемент для массива и добавить запятую в конце.Мы бы получили "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 ()

И последняя строка

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

Вы отправите в браузере предупреждение, которое будетотобразить массив selectedDataStringPresentation.

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

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

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

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...