Question

我正致力于向搜索框添加建议。当您输入输入时，您的条目将用于通过点击服务来构建建议。

我已经跟着this tutorial了，它让我得到了这样的东西：

private suggestions: Observable<Suggestion[]>;

constructor() {
    this.suggestions = this.entry.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap((entry: string) => {
        return this.api.getSuggestions(entry);
      });
}

我希望做的是隐藏我的UI的建议部分，直到观察者回来了。我遇到的问题是，我唯一能够工作的就是两次运行我的api电话。这就是我要做的事情：

<div [class.hidden]="!(suggestions | async)">
  <span class="SearchDDHeader">Suggestions</span>
  <ul class="suggestion-list">
    <li *ngFor="#s of suggestions | async">
      {{ s.Category }} ({{ s.Count }})
    </li>
  </ul>
</div>

使用async表示我订阅了suggestions观察者的两件事，这似乎是两次调用我的api。

用简单的英语：＆＃34;我希望当suggestions Observable返回的最后一个数组包含1个或多个项目时，div可见＃34;但我不确定这样做的正确方法是什么。

Answer 1

您的API被调用两次，因为您的观察结果是＆＃34;冷＆＃34;。为了让它变热＃34; （即共享）您需要致电share运营商：

constructor() {
  this.suggestions = this.entry.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .switchMap((entry: string) => {
      return this.api.getSuggestions(entry);
    }).share();
}

您应该可以订阅两次而无需再次调用API ...

Answer 2

您可以手动设置建议而无需异步管道：

constructor() {
    this.entry.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap((entry: string) => {
        return this.api.getSuggestions(entry);
      })
      .subscribe(data => this.suggestions = data)
}

和HTML：

<div [class.hidden]="!suggestions">
  <span class="SearchDDHeader">Suggestions</span>
  <ul class="suggestion-list">
    <li *ngFor="#s of suggestions">
      {{ s.Category }} ({{ s.Count }})
    </li>
  </ul>
</div>

在Observable回来之前不要表现出来吗？

2 个答案: