Angular(键)事件不仅检测＃符号

Question

im试图使用angular(keyup(事件实现搜索栏。我的文件名称

• base @，
• 基础$，
• 基础1，
• 基础＃，
• 基础2，

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

我的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

---

现在我可以通过#。

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

Answer 2

我注意到您在HTML标记中有缺少。

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

然后，在.ts文件中：

onSearch(event: any) {
  ...
}

Answer 3

我认为该价值在行中的apiURL中确定确定：

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

我认为问题是以下行，您在其中传递＃(主题标签(而无需编码URL。

在下一行 - 您的get请求中使用它之前，请尝试用%23交换主题标签。

请参阅：如何逃脱URL中的哈希字符