Angular 2 select option (dropdown) - как получить значение при изменении, чтобы его можно было использовать в функции?

Я пытаюсь создать выпадающее меню с несколькими значениями.

Однако при выборе значения я хочу сделать вызов API, который принимает идентификатор.

В моем component.ts у меня есть массив значений:

values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

В моем шаблоне я использую этот массив следующим образом:

<select>
  <option *ngFor="let v of values" [value]="v">  
    {{v.name}}
  </option>
</select>

Однако при выборе значения из раскрывающегося списка, как я могу получить доступ к свойству id? Я хочу использовать это в моей функции getPhotosByType(id).

Спасибо

Ответ 1

Мой ответ немного поздний, но простой; но может помочь кому-то в будущем; Я экспериментировал с угловыми версиями, такими как 4.4.3, 5. 1+, 6.x, 7.x и 8.x, используя $ event (последний на данный момент)

Шаблон:

<select (change)="onChange($event)">
    <option *ngFor="let v of values" [value]="v.id">{{v.name}}</option>
</select>

export class MyComponent {
  public onChange(event): void {  // event will give you full breif of action
    const newVal = event.target.value;
    console.log(newVal);
  }
}

Ответ 2

Вам нужно использовать директиву формы Angular на select. Вы можете сделать это с помощью ngModel. Например

@Component({
  selector: 'my-app',
  template: `
    <h2>Select demo</h2>
    <select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
    </select>
  `
})
class App {
  cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
  selectedCity = this.cities[1];

  onChange(city) {
    alert(city.name);
  }
}

Слушатель событий (ngModelChange) генерирует события, когда выбранное значение изменяется. Здесь вы можете подключить свой обратный вызов.

Обратите внимание, что вам нужно будет убедиться, что вы импортировали FormsModule в приложение.

Вот Plunker

Ответ 3

values_of_objArray = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

private ValueId : number = 0 // this will be used for multi access like 
                             // update, deleting the obj with id.
private selectedObj : any;

private selectedValueObj(id: any) {
  this.ValueId = (id.srcElement || id.target).value;
  for (let i = 0; i < this.values_of_objArray.length; i++) {
    if (this.values_of_objArray[i].id == this.ValueId) {
      this.selectedObj = this.values_of_objArray[i];
    }
  }
}

Теперь this.selectedObj с this.selectedObj которого есть выбранный объект из вида.

HTML:

<select name="values_of_obj" class="form-control" [(ngModel)]="ValueId"  
        (change)="selectedValueObj($event)" required>

  <option *ngFor="let Value of values_of_objArray"
          [value]="Value.id">{{Value.name}}</option>    
</select>

Ответ 4

Другое решение было бы, вы можете получить сам объект в качестве значения, если вы не упомянули его id как значение: Примечание: [value] и [ngValue] оба работают здесь.

<select (change)="your_method(values[$event.target.selectedIndex])">
  <option *ngFor="let v of values" [value]="v" >  
    {{v.name}}
  </option>
</select>

В тс:

your_method(v:any){
  //access values here as needed. 
  // v.id or v.name
}

Примечание. Если вы используете реактивную форму и хотите перехватить выбранное значение в форме отправки, вам следует использовать директиву [ngValue] вместо [value] в приведенном выше scanerio.

Пример:

  <select (change)="your_method(values[$event.target.selectedIndex])" formControlName="form_control_name">
      <option *ngFor="let v of values" [ngValue]="v" >  
        {{v.name}}
      </option>
    </select>

В тс:

form_submit_method(){
        let v : any = this.form_group_name.value.form_control_name;  
    }

Ответ 5

Шаблон /HTML файл (component.ts)

<select>
 <option *ngFor="let v of values" [value]="v" (ngModelChange)="onChange($event)">  
    {{v.name}}
  </option>
</select>

Файл машинописи (component.ts)

values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

onChange(cityEvent){
    console.log(cityEvent); // It will display the select city data
}

(ngModelChange) - это @Output директивы ngModel. Он срабатывает, когда модель меняется. Вы не можете использовать это событие без директивы ngModel

Ответ 6

<select [(ngModel)]="selectedcarrera" (change)="mostrardatos()" class="form-control" name="carreras">
    <option *ngFor="let x of carreras" [ngValue]="x"> {{x.nombre}} </option>
</select>

В ts

mostrardatos(){

}