Хола. В последнее время особо не о чем докладывать, кроме того, что работа сумасшедшая, хотя у нас появился новый помощник, и я стал репетитором в академии кодирования. До сих пор это был хороший опыт. Интересно то, что я помню, и то, что я знаю, я знал в какой-то момент, но теперь мне нужно вернуться и снова погуглить… Думаю, такова жизнь программиста. Наслаждайтесь постом этой недели. Основное внимание уделяется различным аспектам Angular Material и конкретным возможностям.
- Обсудите то, чему вы научились на уроке сегодня или на этой неделе (это может быть связано с технологией или нет)
Обнаружение изменений Angular → Пытаясь заставить свою таблицу Ng-Material обновляться каждый раз, когда я добавляю новую задачу в родительский массив, я наткнулся на интересную статью Обнаружение изменений Angular. Я не осознавал, как много Angular следит за изменениями, но он делает это довольно хорошо. Например, в моем проекте todo/trello я подумал, что мне нужно передать объект [todo] из родительского компонента списка в дочерний компонент todo, а затем назначить все свойства объекта todo свойствам, отслеживаемым компонентом, зафиксировать изменения , а затем передайте эти изменения обратно родительскому объекту. К счастью, мой инструктор направил меня в другом направлении. Все, что мне нужно было сделать, это передать объект todo, использовать его в свойствах, а затем Angular обнаружил эти изменения. Мне никогда не приходилось ничего излучать.
ВМ на рабочей станции → Если вы размещаете виртуальную машину (виртуальный сервер) на рабочей станции, а не на серверной операционной системе, не забывайте, что обновления рабочей станции Windows будут установлены и, вполне возможно, сломают что-то.
2. Как вы сортируете и фильтруете данные в компоненте таблицы материалов Angular?
Сортировка и фильтрация данных в Angular Material Table не так сложны, как можно было ожидать. Сначала вам нужно импортировать MatTableModule и создать мат-таблицу в компоненте html. Когда у вас будет создана исходная структура, вам нужно импортировать MatSort и MatTableDataSource.
Свойство dataSource, которое вы передали в свою таблицу матов, теперь должно быть установлено на экземпляр MatTableDataSource с вашим фактическим источником данных, переданным в качестве параметра.
На этом этапе мы можем использовать собственные методы фильтрации и сортировки MatTableDataSource. Например, мы можем фильтровать, создавая функцию, которая запускается, когда на вход поступает текст.
Теперь, когда на вход поступает текст, мат-таблица будет фильтровать данные, чтобы показать результаты, содержащие «строку фильтра».
Для сортировки нам нужно добавить директиву matSort в наш тег mat-table, затем добавить заголовок mat-sort-header к столбцам, которые мы хотим отсортировать, а затем создать свойство viewchild типа MatSort, которое будет обновлять представление при появлении стрелки сортировки. нажата, и в ngOnInit() установите значение свойства «сортировки» MatTableDataSource. Вот так:
3. Обсудите разницу, ценность и недостатки версии на основе CDN и локальной установки Angular Material.
Что лучше, CDN или локальная установка Angular Material? Давайте для начала рассмотрим преимущества или ценность CDN в целом.
Преимущества: Пример[] = [
«CDN хороши для уменьшения задержки для пользователей, географически удаленных от ваших хост-серверов. Если на другом сервере, расположенном ближе к пользователю, кэширован CDN, браузер этого пользователя сможет отобразить вашу страницу быстрее, чем если бы ему приходилось извлекать данные за тысячи миль».
«Говоря о кэшировании, если серверам приходилось доставлять CDN пользователям для других веб-страниц или приложений, то CDN снова кэшируется, что снижает задержку и время загрузки. И теперь браузер также кэширует библиотеку или файл, поэтому браузер может получить то, что ему нужно, из кеша, а не с любого внешнего сервера. JQuery — хороший пример этого, так как он так широко использовался во многих приложениях».]
Минусы: примеры[] = [
«CDN не подходят для динамического контента, то есть для живых данных, которые ваш сервер обрабатывает, чтобы дать пользователю то, что ему нужно в ответ на его ввод»,
Они также не идеальны для приложений интрасети, в которых большинство пользователей находятся в одном и том же месте или в местах, которые находятся на относительно небольшом расстоянии друг от друга. ] (telerik.com)
Как Angular Material вписывается в это? Что ж, поскольку Angular Material был создан Google, а у Google есть серверы по всему миру, он определенно легко доступен через CDN. Так что, если у вас географически разнообразная и рассредоточенная аудитория, возможно, CDN имеет смысл. Но вы также часто используете Material для стилизации или представления динамического контента, такого как отображение, сортировка, фильтрация и т. д.… ввод данных. Исходя из моего опыта на тот момент, если я не создавал приложение для аудитории, разбросанной по всей стране, по континенту или даже по всему миру, я бы придерживался локальной установки.
4. Что такое автозаполнение Angular Material? Как вы это реализуете?
Angular Material Autocomplete — это функция, которая позволяет пользователю начать вводить поисковый запрос, а таблица материалов начинает предлагать варианты автозаполнения запроса. Если вы использовали Google, то видели эту функцию в действии; каждый раз, когда вы вводите что-то в строку поиска, Google предлагает вам множество вариантов, которые могут соответствовать строке вашего запроса. Итак, как мы реализуем эту функцию в наших собственных таблицах материалов?
Несмотря на то, что вы можете добавить к этой функции различные навороты, такие как настраиваемый фильтр, отдельные значения управления и отображения, выделение первого параметра и т. д., давайте просто сосредоточимся на настройке «простого автозаполнения». Сначала вам понадобится поле ввода и способ отслеживания изменений ввода. Для этого мы будем использовать директиву matInput вместе с FormControl из ReactiveFormsModule.
Обратите также внимание, что мы создали тег mat-autocomplete, который привязан к вводу через «#auto=’matAutocomplete’». В этом теге мы перебираем массив «опций». Теперь в файле .ts нам нужно добавить свойства formControl и options.
И!!!….не забудьте импортировать ReactiveFormsModule, а также MatAutocompleteModule в ваш файл app.module.ts.
И тогда у нас есть что-то вроде этого:
***Я реализовал этот пример из material.angular.io
5. Для чего используются чипы углового материала? Как вы их реализуете?
Таким образом, вы можете не знать, что такое Фишки в веб-дизайне по названию, однако вы определенно их видели. Это те овальные элементы на веб-странице, которые представляют собой компактные элементы, представляющие ввод, атрибут или действие (material.io).
Выглядит знакомо?! Фишки предназначены для упрощения с концептуальной и практической точек зрения таких вещей, как «фильтрация контента», «запуск действий» или «выборка».
Как и другие вещи в Material, которые мы рассмотрели, вы реализуете чипы, используя элемент ‹mat-chip-list›, а затем тег ‹mat-chip› для каждого чипа. С этого момента вы также можете реализовать такие действия, как [выбираемый] или [удаляемый]. В разделе material.angular.io о чипах есть много подробных примеров реализации разных конфигураций мат-чипов. Мой совет: сначала начните с самого простого, заставьте его работать и наращивайте его.
Друзья, пора заканчивать. Увидимся в следующий раз.
Ура!
