Поле со списком — при выборе/при изменении
Информационный бюллетень сообщества и предстоящие события за май 2023 г. внутри сообществ Biz Apps. Если вы новичок в этой группе LinkedIn, обязательно подпишитесь здесь, в новостях и объявлениях, чтобы быть в курсе последних новостей от нашей постоянно растущей сети участников, которые «изменили свое представление о коде». ПОСЛЕДНИЕ НОВОСТИ «Понедельники в Microsoft» в прямом эфире на LinkedIn — 8:00 по тихоокеанскому стандартному времени — понедельник, 15 мая — выпейте утренний кофе в понедельник и присоединяйтесь к главным менеджерам программы Хизер Кук и Каруане Гатиму на премьере эпизода «Понедельники в Microsoft»! Это шоу положит начало запуску нового канала сообщества Microsoft в LinkedIn и охватит целый ряд горячих тем из #PowerPlatform, #ModernWork, #Dynamics365, #AI и всего, что между ними. Просто нажмите на изображение ниже, чтобы зарегистрироваться и присоединиться к команде в прямом эфире в понедельник, 15 мая 2023 года, в 8:00 по тихоокеанскому стандартному времени.
Надеюсь увидеть тебя там! Исполнительный основной доклад | День успеха клиентов Microsoft
CVP for Business Applications & Platform, Charles Lamanna, делится последними усовершенствованиями и обновлениями продукта #BusinessApplications, чтобы помочь клиентам достичь результатов в бизнесе. S01E13 Power Platform Connections — 12:00 по тихоокеанскому стандартному времени — четверг, 11 мая
В тринадцатом эпизоде Power Platform Connections Хьюго Бернье глубоко погружается в мысли соведущего Дэвида Уорнера II, а также рецензирует замечательные работы Денниса Гедегебюра, Кейта Атертона, Майкла Мегеля, Кэт Шнайдер и других.
Нажмите ниже, чтобы подписаться и получить уведомление, с Дэвидом и Хьюго LIVE в чате YouTube с 12:00 по тихоокеанскому стандартному времени. И используйте хэштег #PowerPlatformConnects в социальных сетях, чтобы получить шанс представить свою работу в шоу. ПРЕДСТОЯЩИЕ СОБЫТИЯ Конференция European Power Platform: продажа ранних билетов заканчивается!
Ранняя продажа билетов на конференцию European Power Platform заканчивается в пятницу, 12 мая 2023 года!
#EPPC23 объединяет сообщества Microsoft Power Platform на три дня непревзойденного личного обучения, общения и вдохновения, включая три вдохновляющих основных доклада, шесть полнодневных учебных пособий для экспертов и более восьмидесяти пяти специализированных сессий с приглашенными докладчиками, включая Эйприл Даннэм.


Как получить значение выбранного элемента раскрывающегося списка
Вам когда-нибудь приходилось спрашивать: «Как мне получить значение выбранного элемента раскрывающегося меню в Angular?» Давайте ответим на это!
В приложениях Angular раскрывающийся список — это типичный HTML-элемент, используемый в формах и компонентах, позволяющий пользователям выбирать значения.
Сегодня мы узнаем три способа получить значение выбранного пользователем элемента в раскрывающемся списке с помощью Angular.
Три наших подхода:
- Использование события изменения
- Использование ngModel
- Использование viewChild
Наш пример приложения имеет три компонента с одинаковой HTML-разметкой, раскрывающийся список со списком команд NBA и одно свойство selectedTeam в файле TypeScript. Мы будем реализовывать каждое решение, чтобы присвоить выбранное значение из раскрывающегося списка
переменная selectedTeam .
- TeamWithChangeEventComponent: использует событие изменения HTML и ссылку на шаблон.
- TeamUsingViewChildComponent: использует декоратор viewChild и ссылку на шаблон.
- TeamWithNgmodelComponent: использует директиву ng-model.
HTML-разметка выглядит следующим образом:
Вы выбираете свою команду {{ selectedTeam }} с помощью viewChild
И файл TypeScript будет иметь переменную выбранная команда .
{
выбранная команда = '';
}
Работаем с первым решением TeamWithChangeEventComponent
Использование события изменения и ссылочных переменных шаблона
Для работы с этим подходом мы сначала используем ссылочные переменные HTML для чтения значения и изменения события раскрывающегося списка, прослушивания, когда пользователь меняет выбор в раскрывающемся списке, и создания нового метода onSelected для присвоения значения selectedTeam .
Как создать современные раскрывающиеся списки Angular за считанные минуты с помощью пользовательского интерфейса Kendo
Сначала создайте переменные шаблона для раскрывающегося списка, используя #teams . Используйте привязку события для прослушивания события change и связи с методом .
Метод onSelect получает ссылочную переменную и принимает значение элемента раскрывающегося списка.
Код будет выглядеть так:
Вы выбираете свою команду {{ selectedTeam }} с помощью события изменения
Затем создайте метод onSelected(value) в файле TypeScript. Возьмите значение в качестве параметра и присвойте его переменной selectedTeam
импорт {Компонент} из '@angular/core';
@Компонент({
селектор: «команда-приложение-с-изменением-событием»,
templateUrl: './team-with-change-event.component.html',
styleUrls: ['./team-with-change-event.component.css'],
})
класс экспорта TeamWithChangeEventComponent {
выбранная команда = '';
onSelected (значение: строка): недействительным {
this.selectedTeam = значение;
}
}
Как это работает?
Angular использует привязку события для связывания метода и получает значение из параметра, поскольку использует ссылку на шаблон для получения доступа к раскрывающемуся HTML-элементу.
Вы можете узнать больше о ссылочных переменных шаблона и привязке событий в Angular.
Далее, используя viewChild — давайте сделаем это!
Использование viewChild и ссылочной переменной шаблона
Новый подход использует декоратор @ViewChild и ссылочные переменные шаблона. В новом сценарии мы создаем ссылочную переменную шаблона для раскрывающегося списка команд, используя #teams и слушайте событие (изменить) .
Однако метод onSelected не требует передачи значения с небольшим изменением.
HTML-код выглядит следующим образом:
Вы выбираете свою команду {{ selectedTeam }} с помощью viewChild
В наш файл TypeScript добавьте переменную team , используя декоратор @ViewChild с типом ElementRef и создайте метод onSelected() без параметров.
Но используя справочник команд, мы можем прочитать
значение ссылки команд и присвоить его переменной.
Код будет выглядеть следующим образом:
import { Component, ElementRef, ViewChild } from '@angular/core';
@Компонент({
селектор: 'приложение-команда-использование-представления-дочернего',
templateUrl: './team-using-view-child.component.html',
styleUrls: ['./team-using-view-child.component.css'],
})
класс экспорта TeamUsingViewChildComponent {
@ViewChild('teams') команды!: ElementRef;
выбранная команда = '';
onSelected (): недействительным {
this.selectedTeam = this.teams.nativeElement.value;
}
}
Но как это работает?
Элемент ElementRef является оболочкой для HTML-элемента DOM, а свойство nativeElement содержит ссылку на объект DOM. С помощью декоратора @ViewChild получаем ElementRef в классе компонента.
Не стесняйтесь читать больше о декораторе ViewChild и ElementRef.
Использование директивы NgModel
В Angular есть еще один способ получить выбранное значение в раскрывающемся списке, используя возможности ngModel и двустороннюю привязку данных.
ngModel является частью модуля форм. Нам нужно импортировать его в список NgModule в app.module , который будет доступен в нашем приложении.
Директива ngModel помогает нам прослушивать и обновлять переменные при срабатывании изменения события, а чтобы использовать его, добавьте ngModel, используя [(ngModel)]="selectedTeam" .
Angular автоматически получает значение и обновляет переменную selectedTeam , используя подход ngModel, когда пользователь изменяет значение. Нам не нужно создавать onSelected метод в нашем файле TypeScript.
<дел>Вы выбираете свою команду {{ selectedTeam }}
Событие изменения
<выберите [(ngModel)]="selectedTeam"> выбрать>
Как это работает?
Во-первых, директива ngModel использует ControlValueAccessor , потому что Angular по умолчанию предоставляет доступ ко всем элементам формы HTML, таким как ввод, выбор и флажок.
Он отправляет значение, а двусторонняя привязка данных создает ссылку
между значением и переменной.
Если вы хотите узнать больше:
- NgModel
- Двусторонняя привязка данных
- SelectControlValue
- ControlValueAccessor
9 0050 Заключение
Мы разработали три разных способа работы с раскрывающимися списками в наших приложениях. Вы можете найти полный пример кода для этой статьи и поиграть с примером приложения по следующим ссылкам:
- Репозиторий GitHub
- StackBliz
Если вы хотите сэкономить свое время и создать быстрые и расширенные раскрывающиеся списки, я рекомендую посетить статью о Angular Dropdowns in Minutes with Kendo UI — это показывает, как использовать Angular DropDownList в ваших приложениях.
Спасибо за ваше время. Я надеюсь, вы видите, сколько существует способов работы с раскрывающимися списками, и выбираете лучший для своего приложения.
Угловой, Угловые основы
об автореДэни Паредес
Дэни Паредес – эксперт Google по разработке Angular. Он любит делиться контентом и писать статьи об Angular, TypeScript и тестировании в своем блоге и в Твиттере (@danywalls).
Похожие сообщения
Интернет Угловой
Основы Angular: обзор шаблонов Angular
Интернет Угловой
Основы Angular: отслеживание входящих данных с помощью метода Angular TrackBy
Интернет Угловой
Основы Angular: использование Ng-Content для проекции в Angular
Комментарии
Включите JavaScript для просмотра комментариев, созданных с помощью Disqus.
Все статьи
Темы
Интернет- Блейзор
- Ядро ASP.NET
- ASP.NET MVC
- ASP.NET АЯКС
- Угловой
- Реагировать
- jQuery
- Вью
- .NET МАУИ
- Ксамарин
- Blazor Desktop/.NET MAUI
- WPF
- WinForms
- WinUI
- UWP
- UX
- Дизайн-системы
- Составление отчетов
- Тестирование
- Отладка
- Обработка документов
- Доступность
- Человечество
Выпускать
Последние новости
в папке «Входящие»
Подпишитесь, чтобы первыми получать наши статьи и руководства для разработчиков, написанные экспертами!
Все поля обязательны для заполнения
Страна/ТерриторияВыберите страну/территориюСШААфганистанАлбанияАлжирАмериканское СамоаАндорраАнголаАнгильяАнтарктидаАнтигуа и БарбудаАргентинаАрменияАрубаАвстралияАвстрияАзербайджанБагамыБахрейнБангладешБарбадосБельгияБелизБенинБермуды БутанБоливияБосния и ГерцеговинаБотсванаОстров БувеБразилияБританская территория в Индийском океанеБруней-ДаруссаламБолгарияБуркина-ФасоБурундиКамбоджаКамерунКанадаКабо-ВердеКаймановы островаЦентральноафриканская РеспубликаЧадЧилиКитайОстров РождестваКокосовые острова (Килинг)КолумбияКоморские островаКонго (Браззавиль)Конго, демократическая республика Островов КукаКоста-РикаC оте д ИвуарХорватия (Хрватска)КюрасаоКипрЧехияДанияДжибутиДоминикаДоминиканская РеспубликаЭквадорЕгипетСальвадорЭкваториальная ГвинеяЭритреяЭстонияЭсватиниЭфиопияФолклендские островаФарерские островаФиджиФинляндияФранцияФранцузская ГвианаФранцузская ПолинезияФранцузская Южная Терр.
ГабонГамбияГрузияГерманияГана ГибралтарГрецияГренландияГренадаГваделупаГуамГватемалаГернсиГвинеяГвинея-БисауГайанаГаитиОстрва Херд и Макдональдс.ГондурасГонконгВенгрияИсландияИндияИндонезияИракИрландияИзраильИталияЯмайкаЯпонияДжерсиИорданияКазахстанКенияКирибатиКувейтКыргызстанЛаосская Народная Демократическая Республика ЛатвияЛиванЛесотоЛиберияЛивияЛихтенштейнЛитваЛюксембургМакаоМадагаскарМалавиМалайзияМальдивыМалиМальтаЧеловек, Остров Маршалловы ОстроваМартиникаМавританияМаврикийМайоттаМексикаМикронезияМолдоваМонакоМонголияЧерногорияМонтсерратМароккоМозамбикМьянмаНамибияНауруНепал НидерландыНовая КаледонияНовая ЗеландияНикарагуаНигерНигерияНиуэ Остров НорфолкСеверная МакедонияСеверные Марианские острова.НорвегияОманПакистанПалауПалестина, Государство ПанамаПапуа-Новая ГвинеяПарагвайПеруФилиппиныПиткэрнПольшаПортугалияПуэрто-РикоКатарРеспублика Корея (Южная Корея)РеюньонРумынияРуандаС.Грузия и С.С. Острова Андвич Сент-Китс и НевисСент-ЛюсияСамоаСан-МариноСао-Томе и ПринсипиСаудовская АравияСенегалСербияСейшельские островаСьерра-ЛеонеСингапурСловакияСловенияСоломоновы островаСомалиЮжная АфрикаЮжный СуданИспанияШри Ланкаул.
