Angular2: Jak przesłać wybrany element z elementu datalisty HTML z powrotem do komponentu?

Question

Mam prosty komponent, który obejmuje rozwijanie rozwijanego okna. Ta lista jest wypełniana wynikami z wywołania Web API. Do celów wyświetlania używam tylko dwóch pól tego przedmiotu. Jednak po wybraniu elementu muszę zrobić rzeczy ze wszystkimi innymi polami. Jak przekazać cały element z powrotem do komponentu?

Naprawdę byłbym wdzięczny za każdą pomoc.

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

Kod składnikiem jest następujący:

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 (kliknij) zdarzeń wywołanie metody powinny być od wybranej opcji. Twój zadeklarowany "przedmiot" znany jest tylko w zakresie * ngFor, a więc na poziomach jego dzieci. Ogłosiłeś to na zbyt wysokim poziomie.