Выпадающий список onchange не срабатывает

Мне нужна помощь с этим select, он заполнен базой данных, и мне нужно, чтобы элемент был выбран при изменении элемента.

<select class = "custom-select col-md-12" id = "operation" name = "operation" formControlName = "operation">
  <option *ngFor = "let operation of operations" [ngValue] = "operation.id" (ngModelChange) = "show(operation)">{{ operation.value}}</option>
</select>

show(value){
   ...
}

Я уже пробовал с (change) и [(ngModel)], но это не работает.

angular

29.05.2019 19:08

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Событие изменения должно быть в теге <select>:

<select class = "custom-select col-md-12" id = "operation"
(ngModelChange) = "show($event)" name = "operation" formControlName = "operation">
  <option *ngFor = "let operation of operations" [ngValue] = "operation.id" \>
  {{ operation.value}}
  </option>
</select>

На этом все, спасибо большое и извините за невнимательность

— 29.05.2019 19:22

29.05.2019 19:15

Если вы привязываете formcontrolName, вам не нужно привязывать событие изменения в html. Вы можете подписаться на событие изменения в самом ts. Но если вы хотите привязать событие изменения через html, удалите привязку formcontrolName и привяжите событие изменения в html.

Компонент

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  operations = [{ id: 1, value: 'test' }, { id: 2, value: 'test2' }, { id: 3, value: 'test3' }];

  show(event){
    console.info(event.target.value);
  }
}

<select class = "custom-select col-md-12" id = "operation" name = "operation" (change) = "show($event)">
  <option *ngFor = "let operation of operations" [value] = "operation.id" >{{ operation.value}}</option>
</select>

Пример: StackBlitz

На этом все, спасибо большое и извините за невнимательность

— 29.05.2019 19:25

29.05.2019 19:18