标签: rxjs

Angular 2 - 同时运行 2 个订阅

我有以下代码:

//Subscription 3: role ID to role Name
        af.database.object('/roles/'+businessRole.$value)
        .subscribe((roleData) => {
        //Subscription 4: Get user info
        af.database.object('/users/'+businessRole.$key).subscribe(user => {
Run Code Online (Sandbox Code Playgroud)

其中包含订阅内的订阅。

这里的问题是应用程序在运行第二个之前等待第一个。我想一次执行它们,并获得每个的结果。我怎么能做到这一点?

我以前一直在使用Promise.All(),但是:

  1. 我很想知道如何用 rxjs 做到这一点
  2. 我找不到一种方法来获得每个可观察的结果 Promise.All()

谢谢

observable rxjs rxjs5 angular

0
推荐指数
1
解决办法
2427
查看次数

使用自定义过滤器和订阅时未更新 ngFor 列表

我制作了一个搜索组件,它有一个输入字段,可以在输入时过滤搜索结果列表。我还有一个 websocket,可以将新的或更改的值推送到列表中,如下所示:

this._fooService.foos.subscribe(foos => {
    this.foos = foos;
});
Run Code Online (Sandbox Code Playgroud)

当我更改过滤器搜索词时没有过滤器和列表更新时,这很好用。在模板中,它很简单:

<div *ngFor="let foo of foos | filterFoos: searchTerm">
Run Code Online (Sandbox Code Playgroud)

我试过这样做:NgFor 不使用 Angular2 中的管道更新数据

但它没有奏效。我的另一个视图中有相同类型的带有条形的搜索组件,它与过滤器一起工作得很好。虽然有一个承诺,需要在 this.bars = bar 运行之前完成。


编辑:

_fooService.foos 是 Observable<Foo[]>并且在构造函数中初始化:

this.foos = this._fooObservable.asObservable(); 
Run Code Online (Sandbox Code Playgroud)

其中 _fooObservable 是 BehaviorSubject<Foo[]>并且使用 .next 方法(以及旧的 Foos)向其中添加新的 Foos。

过滤管是这样的:

@Pipe({name: 'filterFoos'})
export class FilterFoosPipe implements PipeTransform {

  transform = (foos: Foo[], searchTerm: string = ""): any => {
    let filtered = foos.filter((foo) => {
        return foo.name.toLowerCase().includes(searchTerm.toLowerCase())
    });
    return filtered;
  }
}
Run Code Online (Sandbox Code Playgroud)

rxjs angular

0
推荐指数
1
解决办法
1830
查看次数

Javascript - 更改数组元素的索引

我有一个数组

[1,2,3,4,5]

我想向右移动“2”(当时 1 个位置)或向左移动“2”

我们可以用 RxJS Operators 做到这一点吗?

javascript rxjs

0
推荐指数
1
解决办法
6041
查看次数

无限循环清晰的动作史诗

redux-observable用来处理 redux 异步操作。

我需要通过 id 清除模块状态。

这是我的clearModuleByIdEpic

const clearModuleByIdEpic = (action$: ActionsObservable<any>) => {
  return action$.ofType(t.CLEAR_MODULE_BY_ID)
    .map((action: IActionPayload<any>): string => action.payload.id)
    .map(clearModuleById);
}
Run Code Online (Sandbox Code Playgroud)

这是我的组件方法:调用clearModuleById操作。

 private onClear(id: string) {
    this.props.clearModuleById(id);
  }
Run Code Online (Sandbox Code Playgroud)

但是当我点击删除按钮时会触发onClear点击事件。

它触发一个无限循环的clearModuleById行动。

我犯错了吗?

rxjs redux-observable

0
推荐指数
1
解决办法
962
查看次数

AngularFire Observables / Subscribe - 不在同一范围内设置类变量

我正在使用 Firebase 构建一个 Ionic 应用程序,因此使用 AngularFire2。在 Angularfire2 中,您可以进行身份​​验证,但它是一个 observable,必须订阅才能获取用户对象。问题是我似乎无法设置,this.user = user因为它似乎不在.subscribe同一范围内。

这是一个例子,我有一个auth.ts和一个app.component.ts。在我的服务中,我进行身份验证,

auth.ts

export class AuthService {

// user: Observable<firebase.User>;
user: object = {
    displayName: null,
    email: null,
    emailVerified: null,
    photoUrl: null,
    uid: null
};

constructor(private facebook: Facebook,
            private googlePlus: GooglePlus,
            private platform: Platform,
            private afAuth: AngularFireAuth) {

    // this.user = afAuth.authState;
    afAuth.authState.subscribe((user: firebase.User) => {

        if (!user) {
            this.user = null;
            return;
        }
        this.user =  {
            displayName: user.displayName,
            email: user.email,
            emailVerified: …
Run Code Online (Sandbox Code Playgroud)

rxjs firebase ionic-framework angularfire2 angular

0
推荐指数
1
解决办法
647
查看次数

进口现在区分大小写?

今天我开始将现有的 Angular 应用程序迁移到最新版本4.4.6。我正在尝试使用debounceTime运算符在指定时间之间丢弃一些值。代码如下所示:

this.filtro.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .switchMap(() => ...);
Run Code Online (Sandbox Code Playgroud)

使用--dev标志(Angular CLI)构建它后,我开始收到一个错误,表明这debounceTime不是一个函数。经过一番挖掘,我注意到我通过以下语句改进了 debounceTime:

import "rxjs/add/operator/debouncetime"; 
Run Code Online (Sandbox Code Playgroud)

更改debouncetimedebounceTime解决问题,但我对这种更改感到好奇。这在任何地方都有记录吗?之前的行为是错误的吗?

rxjs angular-cli angular

0
推荐指数
1
解决办法
1264
查看次数

switchmap 和不同的 observables

Angular 和 Rx 新手,试图理解这一点……我的应用程序对 UI 事件做出反应,这导致调用返回 Observable 的 HTTP 服务。我像这样订阅它:

this.myXYZService.search(query)
  .map(r => { // some code })
  .subscribe(r => { //some code });
Run Code Online (Sandbox Code Playgroud)

假设该事件再次触发,并导致对同一 HTTP 服务进行第二次调用,该服务将在第一次调用完成之前返回一个全新的 Observable。

现在,据我所知,我可以使用 switchMap 而不是 map 来丢弃旧的 Observable 并在新的 Observable 上操作?还是我理解错误?如果在第一个事件已经在链的订阅部分之后触发第二个事件会发生什么?在这种情况下它会不会再切换?并且由于 JS 是同步的,在第二个事件甚至开始处理它的链之前,整个第一条链不会执行吗?

我想我对整个事情感到困惑,因为 Observables 的实例是不同的 - Rx 如何跟踪哪个调用要切换?是按函数名吗?假设我有 2 个单独的代码块:

this.myXYZService.search('abcd')
  .map(r => { // some code })
  .subscribe(r => { //some code });

this.myXYZService.search('efgh')
  .map(r => { // some code })
  .subscribe(r => { //some code });
Run Code Online (Sandbox Code Playgroud)

如果我在上面两个都使用 switchMap 会发生什么?第二个调用会取消第一个调用吗?

rxjs angular

0
推荐指数
1
解决办法
2955
查看次数

使用 Jasmine Marbles 的 RxJS 测试捕获运算符总是失败

我想测试一下,如果一个 observable 从它的一个操作符内部捕获到一个抛出的错误,我会得到预期的结果 observable。

下面的服务返回一个 observable,根据其错误参数是否抛出错误。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/of';

export function service(obs1: Observable<number>, obs2: Observable<number>, error: boolean = false) {
  return obs1.merge(obs2)
    .map((elt) => elt * 2)
    .do(() => {
      if (error) {
        throw new Error();
      }
    })
    .catch(() => Observable.of(0));
}
Run Code Online (Sandbox Code Playgroud)

有了这个茉莉花测试

import { cold } from 'jasmine-marbles';
import { Observable } from 'rxjs/Observable';
import { service } from './catch';

describe('Test Marbles', () => {
  it('should …
Run Code Online (Sandbox Code Playgroud)

jasmine rxjs jasmine-marbles

0
推荐指数
1
解决办法
1840
查看次数

rxjs:地图函数内的索引和条件

我从 JSON 数组创建了一个 observable,我想为数组内的每个元素添加新值,我需要根据元素的索引来做。

到目前为止,我只能为所有元素添加相同的键值。有没有办法将索引引入地图功能?例如,我可以说第一个元素“is_leader”为真,而对于所有其他元素,它为假。

到目前为止的代码:

this.dataSubscription = this.dataService.getTestData().subscribe(
  res => {
    this.allData = res.map(data => {
      data['is_leader'] = true;  // Here I would like a condition
      return data;
    });
  }
);
Run Code Online (Sandbox Code Playgroud)

在 Angular 2 中工作。

rxjs angular

0
推荐指数
1
解决办法
4596
查看次数

分组和去抖动可观察?

我有一个 observable,它发出一个包含一些参数的对象。在对象中,其中一个参数(称为optionId)明确标识了一个选项。我想消除该发射的所有实例。但是,如果出现新的optionId,我想开始一个新的时钟,并开始一个新的去抖动。

这是我正在寻找的示例大理石图:

-----1----1-----1----3----3----3----3-----1---3---1---3---1------>
(magic operators for which I'm unclear)
-------------------1-------------------3-----1---3---1---3---1--->
Run Code Online (Sandbox Code Playgroud)

我有去抖动,我喜欢,但它这样做:

-----1----1-----1----3----3----3----3-----1---3---1---3---1------>
debounce
-------------------1-------------------3--------------------1---->
Run Code Online (Sandbox Code Playgroud)

它会在最后跳过所有那些中间 3 秒……这有意义吗?

rxjs

0
推荐指数
1
解决办法
341
查看次数