Angular 'keypress'事件没有给出最新的文本框值

Question

我有这样的场景，我想通过调用 Http REST 来获取匹配的字符串，从而将每次击键时输入框中的字符串发送到服务器。但它没有像我预期的那样工作，例如让我们说输入框中的当前值是 'modul'，如果我在 'modul' 之后输入字符 'e'，我会期望传递的值至 searchDepartmentsWithName 方法将是 'module' 但它给出当前值 'modul' 而不是发送到服务器的修改后的值 'module' 并返回错误的匹配字符串。简而言之，传递给 searchDepartmentsWithName 方法的值始终是修改前的值。我们如何解决这个问题，或者这是正确的方法吗？

searchnox.component.html

<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

searchDepartmentsWithName(departmentName: string) {
this.serverService.searchDepartment(departmentName).subscribe( (response) => {
    console.log(response);
  },
  (error) => console.log(error)
);
this.prepareSearchResults();
}

server.service.ts

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

Answer 1

你应该使用 keyup 而不是 keypress

(keyup)="searchDepartmentsWithName($event.target.value)"

Angular 'keypress'事件没有给出最新的文本框值

Angular 'keypress' event does not give the most updated text box value

keypress

angular

angular6