标签: rxjs6

我已按照https://update.angular.io的说明将Angular应用程序从5.2版升级到6.0版。

现在，由于“ rxjs-5-to-6-migrate”迁移，我的Angular应用程序无法构建：

bla.ts中的错误：错误TS2339：类型“可观察”上不存在属性“地图”。

我有以下进口：

import { Observable } from 'rxjs/observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

如果我这样更改导入，它将起作用：

import { Observable } from 'rxjs/observable';
import 'rxjs/Rx';

但是我不明白为什么...我想使用显式导入而不是导入所有运算符。

更新：正如一些答案指出的那样，我必须使用管道才能使用运算符。这是我的问题，因为我认为我仍然可以将操作员链接到可观察对象。

老款式：

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

this.http.get('/api/appsettings/get').map(data => { return true; }).catch(() => { return Observable.of(false); });

新风格

import { of,  Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

this.http.get('/api/appsettings/get').pipe(map(data => { return …

最近我将角度5升级到角度6,因此我升级了服务代码如下:

register(postBody: any): Observable<any> {
return this.http
  .post(this.remoteUrl + "auth/register", postBody)
  .pipe(
    catchError(this.handleError("register", []))
  );
}

this.authService.register(this.formObj.value).subscribe(
    response => {

    }
)

现在,当我从API获得400错误时.我能够在错误处理程序中捕获此错误但仍然订阅执行,为什么？订阅应该只在获得没有错误的响应时调用.

我是新手,但在角度5中它并没有发生.所以任何人都可以纠正我的错误吗？

我试图从HTTP请求中捕获错误，并基于错误代码向用户显示错误消息。为此，我使用rxjs中的catchError运算符。

但是我收到这个错误，指出类型Observable <Response>上不存在属性'catchError'

以下是我的package.json

"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"

以下是我正在实现的用于处理http请求的服务中使用的导入。

import { catchError } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Http } from '../../../node_modules/@angular/http';
import { Observable } from 'rxjs';
import { AppError } from './../common/app-error';
import { NotFoundError } from '../common/not-found-error';

这是我从服务器上删除帖子并为预期和意外错误返回自定义错误的功能。

deletePost(id:number){
return this.http.delete(this._url+"/"+id).catchError(
  (error:Response)=>{
    if(error.status===404){
      return Observable.throw(new NotFoundError());
    } …

我的应用程序在本地运行良好，但是当我要投入生产时，ng build --prod出现以下错误：

知道会发生什么吗？

找不到./node_modules/rxjs/_esm5/operators/index.js中的模块错误：错误：无法解析/Users/.../node_modules/rxjs/_esm5/operators中的'../internal/operators/endWith' '

package.json

{
"name": "myApp",
"version": "0.0.0",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/animations": "6.0.5",
  "@angular/cdk": "^6.3.3",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/material": "^6.3.3",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "angularfire2": "^5.0.0-rc.10",
  "bootstrap": "^4.1.1",
  "core-js": "^2.5.4",
  "firebase": "^5.0.4",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.3",
  "rxjs": "^6.0.0",
  "rxjs-compat": "^6.2.2",
  "zone.js": "^0.8.26"
},
"devDependencies": …

我有一个NGRX效果(大量使用RxJS)如下:

@Effect()
allFiltersRequested$ = this.actions$.pipe(
  ofType<AllFiltersRequestedAction>(FiltersActionTypes.AllFiltersRequested),
  tap((action) => debug(action)),
  withLatestFrom(this.store.pipe(select(selectAllFilters))),
  filter(([action, allFilters]) => isEmpty(allFilters)),
  mergeMap(() =>
    this.simService.getAllFilters().pipe(
      catchError(() => {
        return of({})
      })
    )
  ),
  map((allFilters) => new AllFiltersLoadedAction(allFilters))
)

我filter用来阻止发出HTTP请求(请参阅参考资料mergeMap)是否已经填充了商店(因为来自API的数据没有改变)

但是,我总是想执行:

map((allFilters) => new AllFiltersLoadedAction(allFilters))

无论是否发出HTTP请求.然而,它不能在之前执行,mergeMap因为mergeMap确保allFilters数据可用.

有没有RxJS always do this类型的运营商？如果没有,我应该如何重构此代码以实现我想要的？

目前,唯一的解决方案是删除,filter但这将导致不必要的HTTP请求.

谢谢

我正在尝试使用map来自RxJS的运算符,但它会抛出一个错误说

"Observable"类型中不存在属性"map".

这是代码:

    import { Injectable } from "@angular/core";
    import { Http } from "@angular/http";
    import "rxjs/add/operator/map";
    @Injectable()

    export class DataService {
     constructor(public http: Http) {}

     getData() {
       return this.http
        .get("https://jsonplaceholder.typicode.com/users")
        .map(res => res.json());
      }
    }

我有一个在版本6之前的Angular中这样编写的搜索功能：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';

import { Product } from '../products/product';
import { ProductService } from '../products/product.service';
import { Subscription } from 'rxjs';
import { SearchService } from '../services/search-service';
import { Router } from '@angular/router';
import { PagedList } from '../shared/paged-list.interface';

@Component({
  selector: 'fb-product-list',
  templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit, OnDestroy {
  total$: Observable<number>;
  items$: Observable<Product[]>;

  product: Product;
  subTimer: Subscription;

  term: string = "";
  currentPage: number = …

我对RxJS相当陌生，我想执行以下操作：

想象一下，我正在编写一种跟踪时间的方法。此方法将观察一个Subject，该Subject将发出类似于以下内容的值：[12, 49, -2, 26, 5, ...]

我该如何将其转换为另一个Observable，为每个值随时间增加平均值？

[
  {
    temperature: 12,
    mean: 12
  },
  {
    temperature: 49,
    mean: 30.5
  },
  {
    temperature: -2,
    mean: 19.67
  },
  {
    temperature: 26,
    mean: 21.25
  },
  {
    temperature: 5,
    mean: 18
  },
  ...
]

我正在努力的困难是均值计算应使用所有先前的值进行。

有没有办法做到这一点？实际上，我需要添加更多数据并计算其他值，但这是我要做的要旨。

我开始优化我的代码，我想取消订阅我在 ngOndestroy 中的订阅。我有多个订阅。问题是当我想调用 add() 方法来添加其他子订阅时，它说无法读取未定义的属性“添加”。我在这里简化了我的代码，所以你只能看到重要的东西。

import {Subscription} from 'rxjs';

export class DashboardComponent implements OnInit, OnDestroy {
     private subscription: Subscription;
}

ngOnInit() {
   this.getData();
   this.getFeed();
}

ngOndestroy {
if (this.subscription) {
   this.subscription.unsubscribe();
   console.log(this.subscription);
   }
}

getData() {
   const subscription = this._authService.currentCompanyId.subscribe((newCompanyId) => {
            this.driverSubs(newCompanyId);
            this.vehicleSubs(newCompanyId);
        });
        this.subscription.add(subscription);
    }

   driverSubs(newCompanyId) {
        const subscription = this._driversService.getAllDrivers(newCompanyId).subscribe((data) => {
            this.getDataForDrivers(data);
        });
        this.subscription.add(subscription);
    }

    vehicleSubs(newCompanyId) {
        const subscription = this._vehiclesService.getAllVehicles(newCompanyId).subscribe((data) => {
            this.getDataForVehicles(data);
        });
        this.subscription.add(subscription);
    }
}

getFeed() {
    this.feedSubs();
    this.feedTachoSubs();
}

feedSubs() {
    const …

请注意，这是Angular 模板绑定与 Observable 异步管道问题的简化问题

模板：

<div>{{foo()$ | async}}</div>

源代码：

import { Component } from "@angular/core";
import { BehaviorSubject, of, Observable } from "rxjs";
import { tap, delay, map, switchMap, concatMap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private index = 0;
  foo$(): Observable<any> {
    console.log("aaa")
    return of("Delayed");
  }
}

上面的代码按预期工作：

但是，如果我添加.pipe(delay(1))到foo$()：

  foo$(): Observable<any> {
    return of("Delayed").pipe(delay(1));
  }

它不会工作并在控制台日志中保留“aaa”。

见https://stackblitz.com/edit/angular-qbhkg3