Валидатор угловых форм
Сравните один массив с другим. Сделать фильтрацию в Angular.
Фильтрация данных с помощью lodash
Сейчас почти в каждом проекте есть фильтрация. Может быть легко выполнить фильтрацию только по одному свойству, но что, если у вас есть один массив параметров, и вам нужно сравнить его с другим массивом. Это может быть тяжело.
Начнем с создания моделей. Нам нужны две модели, одна для фильтров, другая для данных.
Пользователь может слушать и любить разные жанры фильмов и музыки, которые мы будем фильтровать.
Модель фильтра содержит всего пару массивов. Мы будем использовать его, чтобы показать параметр пользовательского фильтра и сохранить выбранные фильтры.
Наш интерфейс будет простым. У нас есть несколько выпадающих элементов управления для фильтрации.
В angular cli нам нужно ввести «npm install ng-multiselect-dropdown», и multiselect будет установлен в нашем проекте. Затем нам нужно импортировать его в наш модуль и использовать в html.
Здесь вы можете найти больше информации об этом мультиселекте.
Наш класс «фильтрация» хранит информацию о фильтрах, свойствах, которые мы привязываем к нашему компоненту. Также у него есть метод, который проверяет, выбран ли какой-либо фильтр и фильтрация.
В компонентах фильтра мы просто настраиваем параметры раскрывающегося списка, генерируя данные и фильтры.
В реальной жизни массив в вашей модели, вероятно, будет иметь два основных свойства «id» и «текст», потому что фильтры имеют эти свойства. В нашем случае они содержат один и тот же текст.
В html мы показываем отфильтрованные данные и привязываем раскрывающийся список к классу фильтрации.
Как будет работать фильтрация? Существует два типа фильтрации: «и», «или».
Пользователь хочет посмотреть, кто из мужчин любит «рок», «джаз» и «поп» музыку, а также любит «комедии».
Сначала нам нужно проверить, выбрал ли пользователь какие-либо фильтры или нет. Если не просто вернуть тот же массив, который нам отправили. Если да, идите дальше.
Представьте, что у нас есть список из 10 человек, нам нужно найти всех людей, которые дают нам 6 человек. Если пользователь выбирает тип фильтра «и», нам нужно отфильтровать 6 человек и найти тех, кто любит «рок» — 4 человека, после этого нам нужно отфильтровать 4 человека и найти тех, кто любит «джаз» — 3 человека, сделать то же самое с «поп». » и делаем финальную фильтрацию, находим кому тоже нравятся «комедии» — 2 человека.
Если пользователь выбирает тип фильтра «или», нам нужно отфильтровать 6 человек (результат фильтрации по полу), найти людей, которым нравится «рок» — 4 человека, затем отфильтровать 6 человек, найти тех, кто любит «джаз», и составить уникальный список людей. кому нравится «рок» или «джаз», затем найдите тех, кто любит «поп», и составьте уникальный список людей, которым нравится «рок», «джаз» или «поп». После этого проведите финальную фильтрацию в этом списке и найдите людей, которым также нравятся «комедии».
Для реализации нам понадобится пара методов из библиотеки lodash. Это очень мощная библиотека, если вы с ней не знакомы, посмотрите на эту библиотеку поближе.
В angular cli нам нужно ввести «npm install -save lodash-es», и небольшая версия этой библиотеки будет установлена в нашем проекте.
В библиотеке lodash мы использовали такие методы, как «unionBy» (брать два массива и возвращать массив уникальных элементов по «id»), «filter», «some» (это предикат, возвращающий true, если элемент содержится в массиве) и «intersectionBy» (взять два массива и вернуть массив дубликатов).
Если вам нужно внимательно посмотреть на проект вот «ссылка.
Первоначально опубликовано на https://tomorrowmeannever.wordpress.com 17 декабря 2019 г.
