javascript - 如何使用 angular2 根据输入搜索值而不是字母点击来突出显示过滤后的内容

Question

我有一个项目列表，根据搜索，它突出显示我正在搜索的字母。现在，如果我使用输入搜索框，我希望字母突出显示，但如果我从字母表行中选择任何字母，它也会突出显示。

演示: DEMO

TS:

   searchFacility(search) {
    this.sLetter = search;
    let memberFacilities = true;
    if (search) {
      this.dtFacilities.expandedRows = [];
      setTimeout(() => {
        this.dtFacilities.expandedRows = this.dtFacilities.value;
        this.dtFacilities.value.forEach(m => {
          m.memberFacilities.forEach(f => {
            let mySearch = search.toLowerCase();
            let facilityName = f.facilityName.toLowerCase();
            if (facilityName && facilityName.includes(mySearch)) {
              f.isShowMember = false;
              memberFacilities = false;
            } else {
              f.isShowMember = true;
            }
          })
        })
        if (memberFacilities) {
          this.dtFacilities.expandedRows = [];
        }
      }, 100);

    }
    else {
      this.dtFacilities.expandedRows = [];
      this.dtFacilities.value.forEach(m => {
        m.memberFacilities.map(f => {
          f.isShowMember = false;
        })
      })
    }
    if(search==''){
      this.searchFname="";
    }
  }

Answer 1

我认为你想要实现的目标可以通过放置 sLetter.toUppedCase() 来解决:

 <a (click)="searchFacility(alphabet)" [class.activeletter]="sLetter.toUpperCase()===alphabet"> {{alphabet}}</a>

我还为 activeletter 添加了一个类:

.activeletter {
  font-weight: 800;
}

我在这里 fork 它来检查它是如何工作的:

https://stackblitz.com/edit/angular-stack-55804980-letterhighlight?file=src/app/app.component.css

更新:

在您发表评论后，我再次看到了代码。 sLetter 和搜索值 searchFname 之间有点困惑。您应该明确要使用哪一个进行过滤(可能是 searchFname)。另外，不要在每次搜索时覆盖 sLetter 并更新管道 getHtml 以接受起始字母和 searchText。

检查更新的 stackblitz:

https://stackblitz.com/edit/angular-stack-55804980-letterhighlight2?file=src/app/app.component.ts