如何根据输入的搜索值突出显示筛选的内容，而不是使用angular2单击字母表

Question

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

演示：演示

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

我在这里分叉是为了检查它是如何工作的：

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

Answer 2

删除字母上的单击事件，更改

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

至

  <a   [class.activeletter]="sLetter==alphabet"> {{alphabet}}</a>