Dropdown onchange не запускается

Question

Мне нужна помощь с этим 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

0

LeoHenrique 29 Май 2019 в 20:08

Answer 1

Событие изменения должно быть в теге <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>

1

Arun 29 Май 2019 в 17:15

Answer 2

Если вы связываете 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.log(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

0

Ravin Singh D 29 Май 2019 в 17:18

Dropdown onchange не запускается

2 ответа

Похожие вопросы

Новые вопросы

angular