如何获取搜索框的输入值，用回车键输入到AngularJs组件中

Question

我需要使用 table 中的 speciesName 获取搜索列表，我试图在按下回车键时获取数据，但是，它告诉我输入数据无效（未定义）。

How can I pass the search value to the type script method in the same input?

类型脚本组件是这样的：

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 的值未定义。

How can I get speciesName value after I input it and click enter key and insert it to the search method?

Answer 1

您正在尝试使用名称属性从表单字段传递值。您可以使用 [(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);

}

Answer 2

您需要为数据绑定添加 [(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
}));

如何获取搜索框的输入值，用回车键输入到AngularJs组件中

How to get the input value of search box and enter it in AngularJs component with Enter key

key-value

angularjs

typescript