Мне нужна помощь с этим 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)], но это не работает.

0
LeoHenrique 29 Май 2019 в 20:08

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>
1
Arun 29 Май 2019 в 17: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.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