是否可以在Angular2/Typescript中使用自己的数据更新Observable? [英] Is it possible to update Observable with own data in Angular2 / Typescript?

问题描述

我有一个带有异步的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或新的Observable会破坏将来的更新.那么，有什么办法可以下一步"或直接将一些数据发送到可观察的位置(在我的情况下为空数组)?

我知道我可以将其推入searchTerms，但这不是必需的，因为它会同时隐藏两个div，并且会使用去抖动值.

解决方案

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

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流混淆，并且允许您立即清除结果，并且仅清除两者之一.

您可以为两者提供两个不同的主题(谷歌和Facebook)，以便在选择时可以分别清除它们.

带有类似示例的Jsbin可以在这里找到: http://jsbin.com/pagilab/edit?js，控制台

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

I have an ngFor with async like that:

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

and this is my component:

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);
}

To populate both arrays I use search method with a value from the input.

Now at some point I wanted to hide the divs by just assigning an empty array which will hide the data (like in non-async case). But it appeared to be more complex than I thought, since assigning null or new Observable breaks future updates. So is there a way to somehow do "next" or send some data to observable directly (an empty array in my case)?

I know I can just push it to the searchTerms, but is not desired since it will hide both divs at the same time + it will use the debounce value.

解决方案

You could do the following. You keep your code but merge the subject into it. This would look like this:

let subject = new Subject();

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

If you know want to clear the list. You could just do

subject.next([]);

This doesn't mess with the original searchTerms stream and allows you to clear the result immediately and only for one of the two.

You can provide two different subject for the two (google and facebook) so you could clear them both separately at your time of choosing.

Jsbin with a similar example can be found here: http://jsbin.com/pagilab/edit?js,console

It first emulates result being found and clears the result with an empty array after 2seconds.

这篇关于是否可以在Angular2/Typescript中使用自己的数据更新Observable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！