使用 Angular Observable 和异步单击后不显示列表元素答案

【问题标题】：do not display list elements after click using Angular Observable and async使用 Angular Observable 和异步单击后不显示列表元素
【发布时间】：2017-10-27 12:26:35
【问题描述】：

我有一个搜索栏，用户可以在其中输入字符，并使用带有 HTTP GET 的 Angular Observable，用户可以获得类似关键字的建议。一旦用户点击首选建议，搜索表单就会填充点击的关键字。

但是，一旦用户点击了关键字，Observable 建议列表仍然存在。当用户点击关键字时，我希望删除列表或隐藏列表。

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

服务

@Injectable()
export class SearchService {
  apiRoot: string = 'http://hydra2.ikap.biba.uni-bremen.de:8092/detectMeaningLanguageSpecific';

  constructor(private http: Http) {
  }

  search(term: string): Observable<SearchItem[]> {
    let inpjson = {'keyword': term, 'language': 'en'}
    let apiURL = `${this.apiRoot}?inputAsJson=${JSON.stringify(inpjson)}`;
    return this.http.get(apiURL)
        .map(res => {
          return res.json().conceptOverview.map(item => {
            return new SearchItem(
                item.url,
                item.translatedURL
            );
          });
        });
  }
}

HTML 组件

<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 = []"

但是我在控制台中收到一个错误，指出由于 results 为空，async 管道将不会执行。

Plnkr for the Same

【问题讨论】：

标签： angular observable

【解决方案1】：

您只需要维护一个变量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>

并在keydown 上再次使其为假，

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

最后用selected改变条件：

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

这是Plnkr的链接。

【讨论】：