直到Observable回来后才显示？

我正在将建议添加到搜索框中。在输入内容时，您的输入用于通过点击服务来构建建议。直到Observable回来后才显示？

我已经按照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两次两件事情。

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

来源

2016-03-01 Corey Ogburn

您可以手动设置建议，但不会异步管：

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>

来源

2016-03-01 20:56:44 dfsq

这就是我决定我不太了解Observables，所以我会留下这个问题，以防有人拥有惯用的rxjs方式。 –

异步管道是为你订阅的，所以在@dfsq答案中，他自己在做，所以基本上它是一样的。 –

你的API调用两次，因为你观察到的是 “冷”。为了让热”（即共享），你需要调用share操作：

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

你应该能够两次认购时不调用您的API两次......

来源

2016-03-01 22:01:34

直到Observable回来后才显示？

回答

相关问题