Angular中实现歌曲数据表多关键词组合搜索的方法咨询

要实现空格分隔的多关键词同时匹配（比如输入“Back AC/DC”要找同时包含这两个关键词的歌曲），你可以按以下步骤修改现有代码：

1. 重构Home组件的搜索逻辑 #

把原来直接写在模板里的匹配逻辑抽成组件方法，同时处理关键词拆分：

修改home.component.ts：

searchText: string = '';

onSearchTextEntered(searchValue: string){
  this.searchText = searchValue.trim();
}

// 新增：判断单首歌是否匹配所有搜索关键词
matchesAllKeywords(song: any): boolean {
  if (!this.searchText) return true;
  
  // 拆分关键词为数组，过滤空值（处理多个连续空格的情况）
  const keywords = this.searchText.toLowerCase().split(/\s+/).filter(k => k);
  
  // 把歌曲的所有字段拼接成小写字符串，统一匹配
  const songText = [
    song.nameC,
    song.artistC,
    song.instrumentC,
    song.chordsC,
    song.techniqueC,
    song.typeC,
    song.difficultyC,
    song.genreC,
    song.scaleC,
    song.observationsC
  ].map(field => field?.toLowerCase() || '').join(' ');
  
  // 检查每个关键词是否都能在歌曲文本中找到
  return keywords.every(keyword => songText.includes(keyword));
}

2. 简化模板中的判断逻辑 #

把原来冗长的*ngIf条件替换成调用上面的方法，让模板更简洁易维护：

修改home.component.html里的表格行判断：

<ng-container *ngFor="let Cancion of cn">
  <tr *ngIf="matchesAllKeywords(Cancion)">
    <!-- 原有的表格单元格内容保持不变 -->
  </tr>
</ng-container>

补充：修复Search组件的代码（可选） #

你贴的search.component.ts里误写了HTML代码，正确的search.component.ts应该包含输出事件，确保搜索值能正确传递给Home组件：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html'
})
export class SearchComponent {
  enteredSearchValue: string = '';
  @Output() searchTextChanged = new EventEmitter<string>();

  onSearchTextChanged() {
    this.searchTextChanged.emit(this.enteredSearchValue);
  }
}

这样修改后，输入“Back in Black G”“AC/DC E A”这类多关键词组合时，只有同时包含所有关键词的歌曲才会被筛选出来，完全满足需求。

内容的提问来源于stack exchange，提问作者bruno_met