根据输入

Question

我有一个搜索栏类型输入，用户可以在其中选择新的对话。 使用我的代码，当用户点击搜索栏时，将显示整个列表。我希望能够根据用户输入的字母过滤此列表。 如果他输入'A'，我想表明以'A'开头的名字。

这是我的组件'list-container'的代码：

<div class="new-chat-window">
  <div class="search-bar">
    <i class="fa fa-search"></i>
    <input class="new-chat-window-input"
           id="new-chat-window-input"
           placeholder="Rechercher"
           (click)="threadService.openList()"/>
  </div>

  <div class="list-container">
    <list-user
      *ngFor="let thread of threadService.orderedThreads | async"
      [thread]="thread">
    </list-user>
  </div>
</div>

.display-new-chat-window {

  .new-chat-window {
    position: relative;
    display: block;
    input:focus { outline-color: $blue; }
    text-align: center;
    z-index: 2;

    .fa {
      position: absolute;
      padding-top: 20px;
      padding-left: 7px;
      color: $grey;
    }

    .new-chat-window-input {
      border: 1px solid #ccc;
      line-height: 30px;
      margin-top: 10px;
      margin-bottom: 5px;
      padding-left: 25px;
      width: 190px;
      z-index: 1;
    }
  }
}

.display-list {

  .list-container {
    display: block;
  }
}

这是我的组件'list-user'的代码：

<div class="user-list">
  <div class="logo-user">
    {{thread.participants[0].name.split(" ")[0].substr(0, 1) + thread.participants[0].name.split(" ")[1].substr(0, 1)}}
  </div>

  <div class="name-user">
    {{thread.participants[0].name}}
  </div>
</div>

是否可以实现此TypeScript？