Как инициировать действие по событию в Angular
Я новичок в Angular и внешнем интерфейсе в целом, и я пытаюсь понять и реализовать способ внесения изменений на основе действий пользователя. Например, у меня есть раскрывающаяся форма в моем представлении, и когда пользователь выбирает или вводит что-то, я хочу, чтобы что-то произошло в моем компоненте, например, сделать http-запрос для заполнения таблицы в представлении, но я просто не понимаю как сделать что-то подобное. На кнопке это имеет смысл, у вас есть кнопка, выполняющая функцию при нажатии, но кроме этого я потерялся ... Любая помощь будет принята с благодарностью.
Ответы 2
Вы можете сделать это с помощью события onChange DOM. Просто привяжите свою функцию обработчика к событию изменения раскрывающегося списка, как показано ниже.
Демо.html
<select class = "form-control" name = "country" (change) = "countryDropDownChangeHandler($event)">
<option value = "IN">India</option>
<option value = "US">United States of America</option>
</select>
Демо.компонент
countryDropDownChangeHandler(event) {
// Perform api stuff
}
Другой подход — использовать реактивные формы Angular. У него немного больше настроек, но он полезен, если вы собираетесь использовать его в форме, поскольку он имеет несколько дополнительных функций.
Вы можете использовать помощник FormBuilder для создания FormGroup. Когда у вас есть объект формы, вы можете прикрепить прослушиватель к элементу управления формы для обнаружения изменений.
// attch listener to form changes
this.form.get("<your_form_control>").valueChanges.subscribe(value => {
// do stuff like call your API
})
Этот код прикрепляет прослушиватель к определенному элементу управления формы, но вы также можете прикрепить его к форме, если хотите зафиксировать любое изменение значения в форме.
Я создал пример приложения для справки, используя подход прослушивателя управления формой: https://stackblitz.com/edit/angular-ivy-6aqbce?file=src/app/app.component.ts