Поле со списком — при выборе/при изменении
Информационный бюллетень сообщества и предстоящие события за май 2023 г. внутри сообществ Biz Apps. Если вы новичок в этой группе LinkedIn, обязательно подпишитесь здесь, в новостях и объявлениях, чтобы быть в курсе последних новостей от нашей постоянно растущей сети участников, которые «изменили свое представление о коде». ПОСЛЕДНИЕ НОВОСТИ «Понедельники в Microsoft» в прямом эфире на LinkedIn — 8:00 по тихоокеанскому стандартному времени — понедельник, 15 мая — выпейте утренний кофе в понедельник и присоединяйтесь к главным менеджерам программы Хизер Кук и Каруане Гатиму на премьере эпизода «Понедельники в Microsoft»! Это шоу положит начало запуску нового канала сообщества Microsoft в LinkedIn и охватит целый ряд горячих тем из #PowerPlatform, #ModernWork, #Dynamics365, #AI и всего, что между ними. Просто нажмите на изображение ниже, чтобы зарегистрироваться и присоединиться к команде в прямом эфире в понедельник, 15 мая 2023 года, в 8:00 по тихоокеанскому стандартному времени.
Как получить значение выбранного элемента раскрывающегося списка
Вам когда-нибудь приходилось спрашивать: «Как мне получить значение выбранного элемента раскрывающегося меню в 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 оте д ИвуарХорватия (Хрватска)КюрасаоКипрЧехияДанияДжибутиДоминикаДоминиканская РеспубликаЭквадорЕгипетСальвадорЭкваториальная ГвинеяЭритреяЭстонияЭсватиниЭфиопияФолклендские островаФарерские островаФиджиФинляндияФранцияФранцузская ГвианаФранцузская ПолинезияФранцузская Южная Терр. ГабонГамбияГрузияГерманияГана ГибралтарГрецияГренландияГренадаГваделупаГуамГватемалаГернсиГвинеяГвинея-БисауГайанаГаитиОстрва Херд и Макдональдс.ГондурасГонконгВенгрияИсландияИндияИндонезияИракИрландияИзраильИталияЯмайкаЯпонияДжерсиИорданияКазахстанКенияКирибатиКувейтКыргызстанЛаосская Народная Демократическая Республика ЛатвияЛиванЛесотоЛиберияЛивияЛихтенштейнЛитваЛюксембургМакаоМадагаскарМалавиМалайзияМальдивыМалиМальтаЧеловек, Остров Маршалловы ОстроваМартиникаМавританияМаврикийМайоттаМексикаМикронезияМолдоваМонакоМонголияЧерногорияМонтсерратМароккоМозамбикМьянмаНамибияНауруНепал НидерландыНовая КаледонияНовая ЗеландияНикарагуаНигерНигерияНиуэ Остров НорфолкСеверная МакедонияСеверные Марианские острова.НорвегияОманПакистанПалауПалестина, Государство ПанамаПапуа-Новая ГвинеяПарагвайПеруФилиппиныПиткэрнПольшаПортугалияПуэрто-РикоКатарРеспублика Корея (Южная Корея)РеюньонРумынияРуандаС.Грузия и С.С. Острова Андвич Сент-Китс и НевисСент-ЛюсияСамоаСан-МариноСао-Томе и ПринсипиСаудовская АравияСенегалСербияСейшельские островаСьерра-ЛеонеСингапурСловакияСловенияСоломоновы островаСомалиЮжная АфрикаЮжный СуданИспанияШри Ланкаул.