Angular 使用角度可观测和异步单击后不显示列表元素

我有一个搜索栏，用户在其中输入字符，并使用带有HTTP GET的角度观测值，用户可以获得类似关键字的建议。用户单击首选建议后，搜索表单将填充单击的关键字

但是，一旦用户单击关键字，可观察的建议列表仍然保留。我希望在用户单击关键字时删除列表或隐藏列表

class SearchItem {
  constructor(public url: string,
              public translated: string
              ) {
  }
}

服务

然而，我在控制台中得到一个错误，指出由于结果为空，异步管道将不会执行

---

您所需要做的就是保持一个变量selected=false

一旦选择了项目，这将变为真

<li class="list-group-item"
      *ngFor="let track of results | async" 
      (click)="searchbox.value = track.translated; selected = true;"
      // make selected true on item selection
> 
      {{track.translated}}
</li>

最后，使用所选的更改条件：

这里是到的链接

<form class="form-inline">
  <div class="form-group">
    <input type="search"
           class="form-control"
           placeholder="Enter search string"
           [formControl]="searchField" #searchbox>
  </div>
</form>

<div class="text-center">
  <p class="lead" *ngIf="loading">Loading...</p>
</div>

<ul class="list-group" *ngIf="searchField.value !== ''">
  <li class="list-group-item"
      *ngFor="let track of results | async" (click)="searchbox.value = track.translated">
      {{track.translated}}
  </li>
</ul>

(click)="searchbox.value = track.translated; results = []"

<li class="list-group-item"
      *ngFor="let track of results | async" 
      (click)="searchbox.value = track.translated; selected = true;"
      // make selected true on item selection
> 
      {{track.translated}}
</li>

<input type="search"
           class="form-control"
           placeholder="Enter search string"
           (keydown)='selected = false; true;' // on keydown make selected false
           [formControl]="searchField" #searchbox>

<ul class="list-group" *ngIf="searchField.value !== '' && !selected"> 
// list won't be shown if textbox is balnk or item is selected