时间戳

首页 > 解决方案 > 如何获取搜索框的输入值并在AngularJs组件中使用Enter键输入

angularjs - 如何获取搜索框的输入值并在AngularJs组件中使用Enter键输入

问题描述

我需要使用表中的speciesName 获取搜索列表，并且我尝试在按下回车键的同时获取数据，但是，它让我输入数据不起作用（未定义）。

如何在同一输入中将搜索值传递给类型脚本方法？

类型脚本组件是这样的：

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

标签： angularjstypescriptkey-value

解决方案

您正在尝试使用 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);

}

推荐阅读