Выше ( нажмите здесь, чтобы просмотреть>> ) мы рассказали, как использовать Kendo UI для Angular для завершения создания функции взаимодействия с данными приложения Angular, которая включает встроенные методы данных, сценарии и т. д. В этой статье мы продолжим представь остальное.
PS: Всем рекомендую практический компонент ~ Kendo UI for Angular — это профессиональная библиотека компонентов Angular UI. Она не только инкапсулирует существующие компоненты, предоставленные другими поставщиками, но и Telerik стремится предоставлять чистые высокопроизводительные компоненты Angular UI без каких-либо зависимостей jQuery. Независимо от того, разрабатываете ли вы приложения Angular с использованием TypeScript или JavaScript, Kendo UI for Angular предоставляет профессиональные компоненты пользовательского интерфейса корпоративного уровня для проектов Angular.
Загрузка новой версии Kendo UI (обмен технологией Q: 726377843)
Сортировать
Мы хотим, чтобы у пользователя было две кнопки для упорядочивания продуктов по цене в порядке возрастания и убывания, как упоминалось выше, метод sort() помогает правильно отсортировать элементы в массиве и возвращает отсортированный массив. По умолчанию он сортирует элементы как строки в алфавитном порядке и по возрастанию, мы хотим сортировать по цене.
Мы можем предоставить специальную функцию сортировки для сортировки элементов в другом порядке.
Сначала откройте app.comComponent.ts и создайте метод sortProductsAsc, используйте метод sort() для сортировки цен в порядке возрастания, передайте функцию (a, b) => a.price - b.price) для сортировки в порядке возрастания.
Для сортировки по убыванию добавьте еще один метод sortProductsDesc и измените значение сравнения в функции сортировки на b.price — a.price. В App.comComponent.ts:
public sortProductsDesc(): void {
this.products = this.products.sort((a, b) => a.price - b.price);
}
public sortProductsAsc() {
this.products = this.products.sort((a, b) => b.price - a.price);
}Затем добавьте две кнопки, чтобы пользователь мог сортировать по возрастанию и убыванию, и свяжите событие щелчка с методом.
<button (click)="sortProductsAsc()">Sort Asc</button>
<button (click)="sortProductsDesc()">Desc Desc</button>Сохраните, и браузер перезагрузится, и когда вы нажмете на метод сортировки, он отсортирует товары по убыванию и возрастанию цены.
фильтровать данные
Мы разрешаем пользователю фильтровать продукты по названию, метод filter() помогает фильтровать элементы массива по определенному условию и возвращает новый массив, содержащий только элементы, проверенные предоставленной функцией.
Сначала мы создаем функцию filterBy, которая принимает значение пользовательского интерфейса. Если фильтр имеет значение, то nameInput имеет значение, и метод фильтра обновляет список продуктов.
filterBy(nameInput: HTMLInputElement) {
if (nameInput.value) {
this.products = this.products.filter(p => p.name === nameInput.value)
}
}В app.comComponent.html добавьте входные данные, используя ссылочную переменную шаблона #filterValue, и добавьте кнопку для вызова метода filterBy, передав ссылку на шаблон, чтобы получить доступ к входному значению.
...
<label for="filter">Filter By Name: </label>
<input id="filter" type="text" #filterValue>
<button (click)="filterBy(filterValue)">Filter</button>Сохраните и браузер перезагрузится, введите название продукта и нажмите кнопку фильтра, чтобы просмотреть результаты.
пакетные данные
Мы хотим вывести новый раздел с группами товаров по категориям, метод уменьшить() помогает сгруппировать элементы массива по определенному атрибуту и возвращает объект с ключом для каждого уникального значения в массиве, соответствующего значению. представляет собой массив совпадающих элементов.
Поскольку мы хотим, чтобы группа продуктов имела четкую структуру, сначала создадим новый интерфейс в app.comComponent.ts:
interface groupeByCategory {
category: string;
products: any;
}Затем объявите новый массив типа groupByCategory:
categories: groupByCategory[] = [];Создайте новый метод showGroup; внутри используйте метод сокращение() для циклического перебора массива продуктов и создания объекта с ключом для каждой уникальной категории. Если ключ не существует в объекте-аккумуляторе, ключ создается и ему присваивается пустой массив, а текущий продукт помещается в массив, связанный с соответствующим ключом.
Наконец, назначьте каждую категорию и продукт массиву категорий с помощью Object.keys.
Окончательный код:
showGroup() {
//First, group the products by category
const group = this.products.reduce((acc: any, curr) => {
let key = curr.category;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(curr);
return acc;
}, {});
//Get the categories and product related.
this.categories = Object.keys(group ).map(key => ({
category: key,
products: group[key]
}));
}Добавьте кнопки для отображения списка групп товаров по категориям.
<button (click)="showGroup()">Show Group</button>Затем используйте ngFor для доступа к каждой категории и передайте список продуктов компоненту list-product.
<div class="category" *ngFor="let item of categories">
<h2>{
{item.category}}</h2>
<app-list-products [products]="item.products"></app-list-products>
</div>Сохраните, перезагрузите браузер и нажмите «Показать группу», появится новый список продуктов по категориям.
агрегированные данные
Если мы хотим узнать общую цену всех продуктов, функция уменьшить() помогает агрегировать элементы массива в одно значение, поэтому мы можем использовать ее для суммирования атрибута цены.
Добавьте новый итоговый атрибут, начиная с 0,00, в app.comComponent.ts, чтобы сохранить сумму всех продуктов. Далее добавим новый метод showTotal, который накапливает значения цен всех атрибутов с помощью функции уменьшения.
total = 0.00;
showTotal() {
this.total = this.products.reduce((acc, curr) => acc + curr.price, 0);
}В рендеринге app.comComponent.html добавьте новую кнопку для отображения общего свойства. Привяжите нажатие кнопки к методу showTotal и визуализируйте общее свойство с интерполяцией.
<button (click)="showTotal()"> Total of all products</button> {
{total}}Сохраните, и браузер перезагрузится. Когда вы нажмете новую кнопку, она покажет общее количество всех продуктов!
Когда использовать методы массива?
Мы подчеркнем несколько моментов, почему и когда использовать методы Array.
- Метод Filter хорошо подходит для проверки концепции и минимальной реализации.
- Сортировка очень хорошо работает для строк и данных без слишком большого количества атрибутов.
- Агрегация и группировка с использованием сокращения помогают работать с объектами с небольшими атрибутами и несложными комбинациями.