5
Ich habe eine einfache Komponente, die eine Drop-Down-Box enthält. Diese Liste enthält die Ergebnisse eines Web-API-Aufrufs. Zur Anzeige verwende ich nur zwei Felder des Artikels. Sobald jedoch ein Element ausgewählt wurde, muss ich mit allen anderen Feldern arbeiten. Wie gebe ich das gesamte Element an die Komponente zurück?Angular2: Wie übergibt man ein ausgewähltes Element von einem HTML-Datenelementelement zurück an die Komponente?
Ich würde wirklich jede Hilfe zu schätzen wissen.
<h1>Get Locations</h1>
<div>
<div>
<input list="browsers" name="browser" #term (keyup)="search(term.value)">
<datalist id="browsers">
<option *ngFor="let item of items | async" >
{{item.code + " " + item.description}}
</option>
</datalist>
</div>
<input type="submit" value="Click" (click)="onSelect(item)" />
</div>
Der Komponentencode ist wie folgt:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { LocationService } from './location.service';
import {Location} from './location.component';
import './rxjs-operators';
@Component({
selector: 'lesson-08',
templateUrl: './views/lesson08.html',
providers: [LocationService]
})
export class Lesson08 implements OnInit{
constructor(private locationService: LocationService) { }
aLoc: Location;
ngOnInit() {
this.aLoc = new Location();
}
errorMessage: string;
locations: Location[];
mode = 'Observable';
displayValue: string;
private searchTermStream = new Subject<string>();
search(term: string) {
this.searchTermStream.next(term);
}
onSelect(item: Location) {
// do stuff with this location
}
items: Observable<Location[]> = this.searchTermStream
.debounceTime(300)
.distinctUntilChanged()
.switchMap((term: string) => this.locationService.search(term));
}
Was passiert, wenn der Benutzer kein Element aus dem Datenlisten auswählt, sondern seine eigenen Eingaben eingibt? Ich denke, dass Sie grundsätzlich zwei Möglichkeiten haben, die Datenlistenergebnisse in einer Karte in Ihrer Komponente abzubilden und das ursprüngliche Objekt basierend auf Benutzereingaben nachzuschauen, oder eine zweite Suche durchzuführen, sobald die Benutzereingabe abgeschlossen ist –
Die Eingabe ihrer eigenen Eingabe wäre nicht erlaubt dieser Fall. Nun, das ist die Absicht. Zusätzliche Suche ist genau das, was ich versuche zu vermeiden. Die Web-API gibt bereits einen Standorttyp zurück, der alle Datenattribute enthält, die ich benötige. Könntest du erklären, was du unter "Karte der Datenlistenergebnisse in einer Karte" meinst? Danke – TheCount
Wenn Query-Daten als Array zurückgeben, ordnen Sie es in ein Objekt, das durch die Anzeigezeichenfolge codiert wird. Beispiel 'var m = {}; arrayData.forEach (d => m [keyOf (d)] = d); ' –