首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 'keypress‘事件不提供最新的文本框值

Angular 'keypress‘事件不提供最新的文本框值
EN

Stack Overflow用户
提问于 2018-06-03 01:43:27
回答 1查看 6.7K关注 0票数 3

我有这样一个场景,我希望通过调用Http REST来获取匹配的字符串,从而在每次击键时将输入框中出现的字符串发送到服务器。但它并不像我预期的那样工作,例如,假设输入框中的当前值是‘模块’,如果我在‘模块’后输入字符'e‘,我希望传递给searchDepartmentsWithName方法的值将是’模块‘,但它给出的是当前值’模块‘,而不是修改后的值’模块‘,该值被发送到服务器,并返回错误的匹配字符串。简而言之,传递给searchDepartmentsWithName方法的值始终是修改前的值。我们如何解决这个问题,或者这是做这个的正确方式吗?

searchnox.component.html

代码语言:javascript
复制
<body>
      <input type="text" placeholder="enter department name here.." (keypress)="searchDepartmentsWithName($event.target.value)" class="ticketinginput" />
      <div *ngFor="let department of searchResults; let i = index">
      <p id="result" href="#" (click)="onClick(department)">{{ department.departmentName }}</p>
      </div>
</body>

searchbox.component.ts

代码语言:javascript
复制
searchDepartmentsWithName(departmentName: string) {
this.serverService.searchDepartment(departmentName).subscribe( (response) => {
    console.log(response);
  },
  (error) => console.log(error)
);
this.prepareSearchResults();
}

server.service.ts

代码语言:javascript
复制
searchDepartment(name: string) {
 this.departmentList = new Array();
const url = `http://localhost:8082/request/searchDepartmentsByName/${name}`;
return this.http.get(url).map(
  (response: Response) => {
    const data = response.json();
    for (const temp of data) {
      console.log(temp);
        const department: IDepartment = <IDepartment> temp;
        this.departmentList.push(department);
        console.log('pushing department' + department.departmentName);
    }
    this.departmentListEventEmitter.emit(this.departmentList);
    console.log(this.departmentList.length);
  }
);
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-03 01:45:39

你应该使用keyup而不是keypress

代码语言:javascript
复制
(keyup)="searchDepartmentsWithName($event.target.value)"
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50659566

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档