Ich versuche ein Dropdown mit ein paar Werten aufzubauen.
Bei der Auswahl eines Werts möchte ich jedoch einen API-Aufruf mit einer ID ausführen.
In meinem component.ts habe ich ein Array von Werten:
values = [
{ id: 3432, name: "Recent" },
{ id: 3442, name: "Most Popular" },
{ id: 3352, name: "Rating" }
];
In meiner Vorlage verwende ich dieses Array wie folgt:
<select>
<option *ngFor="let v of values" [value]="v">
{{v.name}}
</option>
</select>
Wie kann ich jedoch bei der Auswahl eines Werts aus der Dropdown-Liste auf die Eigenschaft id
zugreifen? Ich möchte das in meiner Funktion getPhotosByType(id)
verwenden.
Vielen Dank
Meine Antwort ist wenig spät, aber einfach; aber kann in Zukunft jemandem weiterhelfen; Ich habe mit winklig sowohl 4.4.3, 5.1+, 6.x als auch 7.x mit $ event (spätestens im Moment) experimentiert.
Vorlage:
<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);
}
}
Sie müssen eine Angular-Direktive für die Variable select
verwenden. Das kann man mit ngModel
machen. Zum Beispiel
@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);
}
}
Der Ereignis-Listener (ngModelChange)
gibt Ereignisse aus, wenn sich der ausgewählte Wert ändert. Hier können Sie Ihren Rückruf anschließen.
Beachten Sie, dass Sie sicherstellen müssen, dass Sie die Variable FormsModule
in die Anwendung importiert haben.
Hier ist ein Plunker
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];
}
}
}
Spielen Sie jetzt mit this.selectedObj
, das das ausgewählte Objekt in der Ansicht hat.
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>
Eine andere Lösung wäre: Sie können das Objekt selbst als Wert erhalten, wenn Sie seine ID nicht als Wert angeben: Hinweis: [value] und [ngValue] funktionieren beide hier.
<select (change)="your_method(values[$event.target.selectedIndex])">
<option *ngFor="let v of values" [value]="v" >
{{v.name}}
</option>
</select>
In ts:
your_method(v:any){
//access values here as needed.
// v.id or v.name
}
Hinweis: Wenn Sie ein reaktives Formular verwenden und den ausgewählten Wert im Formular Submit abfangen möchten, sollten Sie die Direktive [ngValue] anstelle von [value ] im obigen Scanerio
Beispiel:
<select (change)="your_method(values[$event.target.selectedIndex])" formControlName="form_control_name">
<option *ngFor="let v of values" [ngValue]="v" >
{{v.name}}
</option>
</select>
In ts:
form_submit_method(){
let v : any = this.form_group_name.value.form_control_name;
}
Template/HTML-Datei (Komponente.ts)
<select>
<option *ngFor="let v of values" [value]="v" (ngModelChange)="onChange($event)">
{{v.name}}
</option>
</select>
TypeScript-Datei (Komponente.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) ist der @Output der ngModel-Direktive. Es wird ausgelöst, wenn sich das Modell ändert. Sie können dieses Ereignis nicht ohne die Direktive ngModel verwenden