如何获取搜索框的输入值，并使用enter键将其输入到AngularJs组件中

Question

我需要使用表中的speciesName获取搜索列表，我试图在按enter键的同时获取数据，但它告诉我输入数据不起作用(未定义(。

如何将搜索值传递给输入

类型脚本组件如下所示：

getSearchResult(speciesName) {
this.speciesName = speciesName;
this.speciesService.getSearchResult(speciesName).subscribe(result => {
this.speciesList = result.results;
}, error => this.toastr.error(error.statusText, '', {
timeOut: 3000
}));

}

组件的html如下所示：

<form class="form-inline" id="searchForm">
<div class="form-group">
<input class="form-control mr-sm-2" type="search" placeholder="Enter Species Name ..."
id="speciesNameSearch" name="speciesNameSearch" aria-label="Search"
(keyup.enter)="getSearchResult(speciesNameSearch)">
</div>
</form>

在我放入搜索条件并输入Enter键后，它没有找到，因为speciesName的值未定义。

在输入speciesName值并单击回车键并将其插入搜索方法后，如何获取该值？

Answer 1

您需要添加[(ngModel(]属性才能使数据绑定工作。不需要为函数传递参数。

更新html代码如下：

<form class="form-inline" id="searchForm">
<div class="form-group">
<input class="form-control mr-sm-2" type="search" placeholder="Enter 
id="speciesNameSearch" name="speciesNameSearch" 
(keyup.enter)="getSearchResult()" [(ngModel)]="speciesName"  >
</div>
</form>

组件功能代码：

//define speciesname for component
speciesName: string = "";
getSearchResult() {

this.speciesService.getSearchResult(this.speciesName).subscribe(result => {
this.speciesList = result.results;
}, error => this.toastr.error(error.statusText, '', {
timeOut: 3000
}));

Answer 2

您正试图使用name属性从表单字段传递值。您可以使用[(ngModel)]，也可以将$event作为函数参数传递，并将组件中的值作为event.target.value

Html看起来像这样：

<form class="form-inline" id="searchForm">
<div class="form-group">
<input class="form-control mr-sm-2" type="search" placeholder="Enter Species Name ..."
id="speciesNameSearch" name="speciesNameSearch" aria-label="Search"
(keyup.enter)="getSearchResult($event)">
</div>
</form>

并且在组件文件中更改为：

getSearchResult(speciesName) {
this.speciesName = speciesName.target.value;
console.log("species name : ", this.speciesName);

}