标签: rxjs6

我在导入角度为6的observable的"of"方法时遇到问题,即使安装了新的项目,所有更新的软件包,我仍然会收到错误.所以,我做了一个小项目

这是服务给予

import { Injectable } from '@angular/core';
import { TableRow } from './table-row';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TestTableService {

  private testData : TableRow[] = [
    {id:1, name:'pi', value:3.14},
    {id:2, name:'euler', value:2.71},
    {id:3, name:'Feigenbaum constant', value:2.50290},
    {id:4, name:'Mills constant', value:1.30637},
    {id:5, name:'one', value:1},
    {id:6, name:'square root of 2', value:1.41421}
  ];

  constructor() { }

  public getData() : Observable<TableRow[]>
  {
    return Observable.of(this.testData);
  }
}

这是使用它的组件:

import { Component, OnInit } from '@angular/core';
import …

那么of运算符和Observable.of创建observable的推荐方法之间的区别是什么？

import { Observable } from 'rxjs/Observable';
const obs$ = Observable.of(3);

要么

import { of as observableOf } from 'rxjs';
const obs$ = observableOf(3);

将 rxjs 从 v5 迁移到 v6 后，我在使用 mergeMap 时遇到错误：

of('foobar').pipe(
  mergeMap(() => of('baz'))
).subscribe(console.log);  

错误：

core.js:1598 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.push../node_modules/rxjs/internal/util/subscribeTo.js.exports.subscribeTo (subscribeTo.js:42)
    at Object.subscribeToResult (subscribeToResult.js:7)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:132)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:129)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:112)
    at MergeMapSubscriber.push../node_modules/rxjs/internal/Subscriber.js.Subscriber.next (Subscriber.js:103)
    at Observable._subscribe (scalar.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:176)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at MergeMapOperator.push../node_modules/rxjs/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:87)

of('baz')是一个流，对吧？那么为什么我会收到这个错误呢？

在下面的代码中，我的国家/地区选择选项被多次触发以致浏览器停止响应。

<div [formGroup]="countryForm">
  <mat-form-field>
    <mat-select formControlName="selectedCountry" class="my-item-text" placeholder="Country">
      <mat-option (onSelectionChange)="onCountrySelectionChanged($event)" *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

和我的组件代码如下

  onCountrySelectionChanged(changeEvent) {
    if (changeEvent && changeEvent.isUserInput && this.selectedCountry != changeEvent.source.value) {
      this.countrySelected.emit( changeEvent.source.value);
    }
  }

我试图通过检查它的用户更改事件 [isUserInput] 并检查值是否真的改变来进行限制！现在可以减少火灾事件并且应用程序正常工作。

有没有更好的方法来使用选择选项，因为我现在在使用 mat-select 组件的任何地方都包括上述逻辑。

我试过了:

import { Observable } from 'rxjs/Observable';

这给了我错误:

node_modules/rxjs/Obserable没有导出成员'Observable'

我试过了:

import { Observable } from 'rxjs';

这给了我TSLINT错误:

此导入已列入黑名单

我知道我可以通过删除tslint.json中的'rxjs' import-blacklist条目来解决这个问题,但我不想这样做.我确信它有充分的理由.我如何正确进行导入？谢谢

编辑:更改为大写O - 请参阅评论

我根据rxjs 6文档编写了以下代码。我目前正在运行angular 5，rxjs 6和angularfire2 rc.10。我得到的错误是

[ts] property 'pipe' does not exist on type 'OperatorFunction<{}, [{}, user, string]>'.

这是代码

this.companies$ = combineLatest(this.authService.user$, this.filter$).pipe(
  switchMap(([user, filter]) =>
    this.afs.collection("companies", ref => {
        if (user) {
          ref.where("owner.network", "==", user.activeNetworkProfile.id);
        }
        if (user) {
          ref.where("name", "==", filter);
        }
        return ref;
      }).valueChanges()
  )
);

this.authService.user $和this.filter $是可观察的。

public filter$: Observable<string>;
public user$ : Observable<User>;

我有一个登录保护程序，基本上可以检查用户il是否已登录。如果已登录，则跳过登录并转到主页。我编写了这段代码，并且可以正常工作：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
            map(isAuthenticated => {
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

现在，由于我不必更改或编辑输出数据（isAuthenticated布尔值），所以我想：为什么不使用tap运算符？因此，我重新编写了代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
   HERE------> tap(isAuthenticated => {   <------ HERE
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

然后我去了Chrome，然后看到了黑页，情况就是这样：

• 我打开应用程序
• 我尚未登录
• 网址变为http：// localhost：4200 /＃/而不是 http：// localhost：4200 /＃/ login，结果：空白页
• 如果我尝试手动进入http：// localhost：4200 /＃/ login，它将停留在该页面中，但我会看到一个空白页面
• 如果我尝试回家，它将重定向到http：// localhost：4200 /＃/ …

我得到了tslint waring select is deprecated: from 6.1.0. Use the pipeable 'select' operator instead.

我的选择器如下所示

private availableStudents$ = this.store.select(getAvailableStudents);

还有我的package.json

"rxjs": "^6.0.0" "tslint": "~5.9.1" "typescript": "^2.9.2" "@angular/cli": "~6.1.2

任何人this._getReactions$.next()都this.http.get(...)可以在出现错误时不工作的情况下提供帮助。我想保持可观察状态以接受下一个输入。

private _getReactions$: Subject<any> = new Subject();

 constructor() {
  this._getReactions$
  .pipe(
    switchMap(() => {
        return this.http.get(...)
        // http request 
    }),
    catchError(error => {
      console.log(error);
      return empty();
    })
  )
  .subscribe(data => {
      console.log(data)
      //results handling
  });
 }

onClick() {
  this._getReactions$.next();
}

使用RxJS v6很难从子集合中检索循环中每个项目的数据。无法迭代从HTTP调用检索的throw数组。合并映射仅对需要在所有数组项目上执行的单个项目执行此操作。

我已经坚持了三天。我已经尝试了一切。问题在于，新的管道语法在为您提供组织代码的巧妙方法的同时，没有简单的方法来循环引发数据收集。无法使用地图javascript函数，因为它在可观察范围之外并且返回的项目不确定。在互联网上，我只能找到一个很好的单个mergeMap的基本示例。但是，我需要使用带有http调用的数组中的每个项目，并将响应附加到同一对象。

我从第三方无法控制的两个端点开始。我嘲笑了一些示例API来说明。

端点1-返回所有项目ID： http：// localhost：3000 / contact

{
  "name": "test",
  "contact": [
    {
      "_id": "5c9dda9aca9c171d6ba4b87e"
    },
    {
      "_id": "5c9ddb82ca9c171d6ba4b87f"
    },
    {
      "_id": "5c9ddb8aca9c171d6ba4b880"
    }
  ]
}

端点2-返回单个项目信息： http：// localhost：3000 / contact / 5c9dda9aca9c171d6ba4b87e

[
   {
     "_id": "5c9dda9aca9c171d6ba4b87e",
     "firstName": "Luke",
     "lastName": "Test",
     "email": "vgadgf@adsgasdg.com",
     "created_date": "2019-03-29T08:43:06.344Z"
   }
]

期望的结果-通过使用RxJs v6 +返回带有嵌套数据的Observable：

{
  "name": "test",
  "contact": [
    {
      "_id": "5c9dda9aca9c171d6ba4b87e".
      "relationship":  {
                         "_id": "5c9dda9aca9c171d6ba4b87e",
                         "firstName": "Luke",
                         "lastName": "Test",
                         "email": "vgadgf@adsgasdg.com",
                         "created_date": "2019-03-29T08:43:06.344Z"
                       }
    },
    {
      "_id": "5c9ddb82ca9c171d6ba4b87f",
      "relationship": {
                         "_id": …