Javascript 如何根据输入搜索值而不是字母表突出显示过滤内容使用angular2单击

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

演示：

TS:

---

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

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

{{alphabet}

到

{{alphabet}

我认为你想要实现的目标可以通过放置

sLetter.toUppedCase（）来解决。

：

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

更新：

在你的评论之后，我又看到了代码。

sLetter

和搜索值

searchFname

之间有点混乱。您应该澄清您想要使用哪一个进行过滤（可能是

searchFname

）。 另外，不要在每次搜索时覆盖

sLetter

，并更新管道

getHtml

，以接受起始字母和搜索文本

检查更新的stackblitz:

---

感谢您的回复，但我需要过滤内容，如果我删除了点击事件，那么过滤就不会发生。我，感谢您的回复，我想解释的是，如果我点击“A”，那么我会得到过滤列表，因此在列表中，如果“A/A”在那里，它会以黄色突出显示，因此，我只希望在输入搜索框中给出时，颜色高亮显示到过滤列表中，而不是在我单击字母时，在输入搜索框中显示的字母“A”clickI not want，如何更改这一点？然后您也必须更新

searchMedicalOffices

管道，并更改方法

getAlph

I更新了代码。我希望这就是你需要的。无论如何，我认为你不应该使用管道来进行搜索，这会使一切更难理解，并且当你只想要搜索的值时会有一点混乱（而且更慢，更慢）。请在回答中随演示一起更新答案，以便它也能帮助其他人。非常感谢，我投票并接受了你的回答嗨，我有一个问题，如果我给搜索输入框，我点击所有，然后它会显示子值

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

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

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

.activeletter {
  font-weight: 800;
}