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事件。我假设目录绑定到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

我正在使用角度9。

以下示例也适用：

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

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

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

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

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

2 个答案: