Angular 2 select option (dropdown) - jak uzyskać wartość po zmianie, aby można ją było wykorzystać w funkcji?

Question

Próbuję zbudować rozwijanego z kilku wartości.

Jednak po wybraniu wartości chcę wykonać wywołanie API, które przyjmuje identyfikator.

W moich component.ts Mam tablicę wartości:

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

w swoim szablonie, używam tej tablicy następująco:

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

jednak na wybranie wartości z rozwijane, w jaki sposób mogę uzyskać dostęp do właściwości id? Chcę tego użyć w mojej funkcji getPhotosByType(id).

Dzięki

Answer 1

Trzeba użyć kątowym dyrektywę formularz na select. Możesz to zrobić za pomocą ngModel. Na przykład:

@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); 
    } 
} 

Detektor zdarzeń (ngModelChange) emituje zdarzenia po zmianie wybranej wartości. Tutaj możesz podłączyć swoje wywołanie zwrotne.

Uwaga: musisz upewnić się, że zaimportowałeś FormsModule do aplikacji.

Oto Plunker

Answer 2

<pre> 
    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]; 
      } 
     } 
/* now play wit "this.selectedObj" which has the selected obj from the view */ 
    } 
</pre> 

/*-------------------------------------------------------------*/ 
/* in 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> 

Answer 3

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

W ts

mostrardatos(){ 

} 

Answer 4

Moja odpowiedź jest trochę późno, ale proste; ale może pomóc komuś w przyszłości; Zrobiłem eksperyment z kątową zarówno 4.4.3 i 5.1+ użyciu $ zdarzenie (ostatni w tej chwili)

Szablon:

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

TS

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