Angular 2. Keyup 事件未从输入触发

Question

这是一个非常简单的情况，但我真的不知道为什么它不起作用。我得到了应该在 keyup 事件上调用函数的输入文本字段。但事实并非如此。

<input class="form-control m-1" type="text" #search (keyup)="filterCatalogues(search.value)">

以及代码本身。

filterCatalogues(value: string): CataloguesListDto[] {
    return this.catalogues.filter (catalogue => {
      return catalogue.companyName === value || catalogue.catalogueName === value;
    });
  }

Answer 1

您需要更改您的 filterCatalogues 事件。我假设 catalogues 绑定到 dom

<input class="form-control m-1" type="text" #search (keyup)="filterCatalogues()">

filterCatalogues(){
this.catalogues = this.catalogues.filter (catalogue => {
  return catalogue.companyName === searchModel|| catalogue.catalogueName === searchModel;
});
}

Answer 2

我正在使用angular9.

以下示例也适用：

<input #myInput  type="text"
     placeholder="Search for data ..."
     (keyup)="doSearch(myInput.value)" />

doSearch 方法使用路由器使用找到的元素更新另一个部分：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  doSearch(value: string) {
    console.log(`value=${value}`);
    this.router.navigateByUrl(`/search/${value}`);
  }
}

“值”字符串与 app.module.ts 中定义的路由匹配：

const routes: Routes = [
     // other routes
    {path: 'search/:keyword', component: ProductListComponent},
];

组件然后使用服务来处理请求。

Angular 2. Keyup 事件未从输入触发

Angular 2. Keyup event not fired from input

angular

keyup