Question

我正在尝试使用angular（keyup）事件实现搜索栏。而且我的文件名为

基本@，
基本$，
以1为基础，
基本编号，
基数2，

当我在搜索栏中搜索基数@或基数$或基数1时，它会过滤良好。但是当我搜索base＃时，它不过滤base＃，它会过滤所有带有base的文件名。这是我下面编码的代码

我的html：

<input type="search" class="form-control" placeholder="Search file" (keyup)="onSearch($event)" [(ngModel)]='searchKeywords'>

我的js代码：

onSearch(event: any) {
    const keywords = event.target.value;
    if (keywords && keywords.length > 2) {
          const apiURL =`abc/thg/hjy?filter[file.name]=${keywords}`;
          this.api.get(apiURL).subscribe((data: any) => {
            console.log(data);
            this.topics = data.list;
            if (this.trigger) {
            this.trigger.openMenu();
            }
         });
    } else {
        this.topics = [];
        this.trigger.closeMenu();
    }
}

Answer 1

我注意到您在HTML标记中有一个缺失。

<input type="search" class="form-control" placeholder="Search file" (keyup)="onSearch($event)" [(ngModel)]="searchKeywords">

然后，在.ts文件中：

onSearch(event: any) {
  ...
}

Answer 2

我认为该行的apiURL中的值已经确定：

const apiURL =`abc/thg/hjy?filter[file.name]=${keywords}`;

我认为问题在于以下几行，您在其中传递＃（井号）而未对其进行URL编码。

在下一行使用%23请求之前，请尝试将其与get交换出去。

请参阅：How to escape hash character in URL

Answer 3

这成功了。现在我可以传递＃了。

onSearch(event: any) {
  const keywords = event.target.value;
  const params: any = {};
  if (keywords && keywords.length > 2) {
    params['filter[translations.title]'] = keywords;
    const options = {
      search: params
    };
    const apiURL = `abc/thg/hjy`;
    this.api.get(apiURL, options).subscribe((data: any) => {
      console.log(data);
      this.topics = data.list;
      if (this.trigger) {
        this.trigger.openMenu();
      }
    });
  } else {
    this.topics = [];
    this.trigger.closeMenu();
  }
}

Angular（keyup）事件未仅检测到＃个符号

3 个答案: