Angular2: How to pass the selected element from the HTML datalist element back to the component?

Question

I have a simple component that includes to reduce the drop-down list. This list is populated with the results of the web API call. For display purposes, I use only two element fields. However, once the item has been selected, I need to do everything with all other fields. How to pass the whole element back to the component?

Any help would really be appreciated.

<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> 

The component code is as follows:

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

Answer 1

The event (click) calling the method must be on the selected option. Your declared "element" is known only in the * ngFor area, therefore, at the levels of its children. You have declared it too high.