Angular2：如何将所选项目从HTML数据列表元素传递回组件？

我有一个简单的组件，其中包括一个用于删除下拉框的文件。这是一个由Web API调用的结果填充的列表。出于显示目的，我只使用项目的两个字段。但是，一旦选择了一个元素，我就需要处理所有其他字段。如何将整个元素传递回组件

真的非常感谢你的帮助

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

获取位置
{{item.code+“”+item.description}

部件代码如下所示：

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

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
从“./location.service”导入{LocationService}；
从“./Location.component”导入{Location}；
导入“/rxjs运算符”；
@组成部分({
选择器：“第08课”，
templateUrl:'./views/lesson08.html'，
提供商：[定位服务]
})
导出类Lesson08实现OnInit{
构造函数（私有locationService:locationService）{}
aLoc：位置；
恩戈尼尼特（）{
this.aLoc=新位置（）；
}
错误消息：字符串；
地点：地点[]；
模式=‘可观察’；
显示值：字符串；
private searchTermStream=新主题（）；
搜索（术语：字符串）{
this.searchTermStream.next（术语）；
}
onSelect（项目：位置）{
//在这个位置做些什么
}
items:Observable=this.searchTermStream
.debounceTime（300）
.distinctUntilChanged（）
.switchMap（（术语：string）=>this.locationService.search（术语））；
}

调用该方法的（单击）事件应位于所选选项上。您声明的“项”仅在*ngFor的范围内已知，其子项的级别也是如此。您声明的级别太高。

如果用户没有从数据列表中选择项目，而是键入自己的输入，该怎么办？我认为您基本上有两种选择，将datalist结果映射到组件中的映射中，并根据用户输入查找原始对象，或者在用户输入完成后进行第二次搜索在这种情况下不允许输入自己的输入。嗯，这就是目的。额外的查找正是我试图避免的。Web API已经返回了一种位置类型，它具有我需要的所有数据属性。你能澄清你所说的“将数据列表结果映射到映射”是什么意思吗？感谢当查询数据以数组形式返回时，将其映射到由显示字符串键入的对象中。示例

var m={}；arrayData.forEach（d=>m[keyOf（d）]=d）我面对的是同样的。。。。。