Question

我有像这样的异步的ngFor：

<div *ngFor="let location of googleSearchLocations | async">
<div *ngFor="let location of facebookSearchLocations | async">

这是我的组成部分：

private searchTerms = new Subject<string>();
googleSearchLocations: Observable<GoogleLocation[]>;
facebookSearchLocations: Observable<FacebookLocation[]>;

ngOnInit(): void {

    this.googleSearchLocations = this.searchTerms
                                     .debounceTime(300)
                                     .switchMap(term => term 
                                         ? this.locationService.getGoogleLocations(term)
                                         : Observable.of<GoogleLocation[]>([]));

    this.facebookSearchLocations = this.searchTerms
                                       .debounceTime(300)
                                       .switchMap(term => term
                                           ? this.locationService.getFacebookLocations(term)
                                           : Observable.of<FacebookLocation[]>([]));
}

search(term: string): void {
    this.searchTerms.next(term);
}

要填充两个数组，我使用search方法和输入值。

现在在某些时候我想通过分配一个隐藏数据的空数组来隐藏div（就像在非异步情况下一样）。但它似乎比我想象的更复杂，因为分配null或new Observable打破了未来的更新。那么有没有办法以某种方式做“下一步”或直接将一些数据发送到observable（在我的情况下是一个空数组）？

我知道我可以将它推到searchTerms，但是不需要，因为它会同时隐藏两个div +它会使用去抖动值。

Answer 1

您可以执行以下操作。您保留代码但将主题合并到其中。这看起来像这样：

let subject = new Subject();

this.googleSearchLocations = this.searchTerms
                                 .debounceTime(300)
                                 .switchMap(term => term 
                                     ? this.locationService.getGoogleLocations(term)
                                     : Observable.of<GoogleLocation[]>([]))
                                 .merge(subject);

如果您知道要清除列表。你可以做到

subject.next([]);

这不会破坏原始的searchTerms流，并允许您立即清除结果，仅适用于其中一个。

你可以为这两个主题提供两个不同的主题（google和facebook），这样你就可以在选择时单独清除它们。

可以在此处找到具有类似示例的Jsbin：http://jsbin.com/pagilab/edit?js,console

它首先模拟找到的结果，并在2秒后用空数组清除结果。

是否可以使用Angular2 / Typescript中的自己的数据更新Observable？

1 个答案: