wake-up-neo.com

Angular 2-Auswahloption (Dropdown) - Wie wird der Wert bei Änderung angezeigt, damit er in einer Funktion verwendet werden kann?

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

javascripthtmlangulartypescript
29
user1354934

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);
  }
}
36
mumair

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

21
Paul Samsotha
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>
3
Rinold

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;  
    }
2
Nabin Kumar Khatiwada

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

1
VIKAS KOHLI