使用 Angular 4 Observable 搜索栏为空时不显示建议答案

【问题标题】：Do not show suggestions when Search bar empty using Angular 4 Observable使用 Angular 4 Observable 搜索栏为空时不显示建议
【发布时间】：2017-10-27 09:38:34
【问题描述】：

我有后端服务器，可为我提供有关家具的信息。我在 Angular (Typescript) 中有一个前端服务，用户将在其中输入相关单词，该服务会建议类似的单词。

问题

当用户删除单词并且搜索栏为空时，建议仍会显示。搜索栏为空时如何删除建议？

可注入服务

@Injectable()
export class SearchService {
  apiRoot: string = 'myEndPoint';

  constructor(private http: Http) {
  }

  search(term: string): Observable<SearchItem[]> {
    // HTTP GET with parameter JSON as mentioned below(inpjson)
    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
            );
          });
        });
  }
}

HTTP 响应

{
  'searchTyp': 'ExplorativeSearch',
  'conceptOverview' : [
       {
        'url': 'someurl1',
        'translatedURL': 'somestuff1'
       },
       {
         'url': 'someurl2',
         'translatedURL': 'somestuff2'
       }
       ....
   ]
}

应用组件

class AppComponent {
  private loading: boolean = false;
  private results: Observable<SearchItem[]>;
  private searchField: FormControl;

  constructor(private http: SearchService) {
  }

  ngOnInit() {
    this.searchField = new FormControl();
    this.results = this.searchField.valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .do(_ => this.loading = true)
        .switchMap(term => this.http.search(term))
        .do(_ => this.loading = false)
  }

  doSearch(term: string) {
    this.http.search(term)
  }
}

plunkr link

参考

HTTP Example with Observable

【问题讨论】：

标签： angular typescript observable

【解决方案1】：

只需做：

<ul class="list-group" *ngIf="searchField.value !== ''">

链接到：Plnkr

【讨论】：

只是一个简单的问题，我应该在哪里寻找角度以便在单击建议的查询时自动完成搜索栏？
点击 li ，获取对象

【解决方案2】：

您可以在模板中的 ul div 上使用 *ngif="input.value.length == 0"，并在输入 div 中插入 #input 标签

【讨论】：

【解决方案3】：

在查询api之前，先检查searchTerm，如果为空，则将结果设置为空数组。

【讨论】：