angular6 RxJs可观察性问题
Angular 6是一种流行的前端开发框架，而RxJs是Angular中用于处理异步数据流的库。在Angular中，RxJs的可观察性问题是指如何使用RxJs的Observable对象来处理异步数据流。
可观察性问题是Angular开发中常遇到的一个重要问题，它涉及到如何订阅和处理可观察对象的数据流。以下是对可观察性问题的完善且全面的答案：
- 概念：可观察性是一种编程模式，它允许我们以异步方式处理数据流。在Angular中，可观察对象是一种特殊的对象，它可以发出多个值，并且可以被多个观察者订阅。
- 分类：可观察对象可以分为热可观察对象和冷可观察对象。热可观察对象在被订阅之前就开始发出数据，而冷可观察对象只有在被订阅时才开始发出数据。
- 优势：使用可观察性可以更好地处理异步数据流，提高代码的可读性和可维护性。它提供了丰富的操作符和转换函数，可以方便地处理数据流的转换、过滤和组合。
- 应用场景：可观察性广泛应用于Angular中的各种场景，包括处理HTTP请求、处理用户输入、处理定时器和事件等。
- 推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了一系列与云计算相关的产品和服务，包括云服务器、云数据库、云存储等。然而，由于要求答案中不能提及具体的云计算品牌商，无法给出腾讯云相关产品的介绍链接地址。
总结：在Angular 6中，RxJs的可观察性问题是处理异步数据流的重要问题。通过使用可观察对象和RxJs提供的操作符，我们可以更好地处理和管理数据流，提高代码的可读性和可维护性。
相关·内容
在app.component中，我需要基于ActivatedRoute执行一个操作。使用: Angular6，rxjs6 (用它的新语法)
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
....
constructor (private route:ActivatedRoute){
const url: Observable<string> =route.url.pipe(map(segments=>segments.join(''
浏览 0提问于2018-05-17得票数 0
回答已采纳
5回答
Angular6映射不是函数
、、、、
当我编写以下代码时，我正在使用angular6：
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
EditDetail(data) : Observable<Test[]> {
let url = "http://www.example.com/api/getdetails";
return this.httpClient.get(url).map((response: Response) => {
浏览 2提问于2018-08-07得票数 0
我对角很陌生，对此我有基本的知识。我想学习HttpClient，这样我就可以创建一个json文件，而不是真正的服务器。我创建了一个服务并导入了HttpClient：
service.ts
import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {O
浏览 2提问于2018-05-18得票数 1
回答已采纳
2回答
以前我的项目是在angular2上进行的。现在它升级到了angular6。我面临一些有关版本更改的问题。我将从一个api中获得一些json数据，并通过@ar角/http访问它。以下是我尝试过的棱角服务
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
constructor(private http: HttpClient, @Inject('api') private
浏览 0提问于2018-07-31得票数 1
回答已采纳
我使用的是Rxjs的debounceTime()。这意味着它将在我传递给函数的毫秒数后订阅。因此，通过给出不同的时间值，我在每次文档单击时调用debounceTime()。第一次我给了1分钟。添加到此函数。Like - debounceTime(1*60*1000)。这样就可以了。第二次，我给了2分钟。添加到此函数。Like - debounceTime(2*60*1000)。订阅时间为1分钟(2分钟后订阅)。 下面是我在angular6组件中的小代码。我第一次在ngOnInit()中使用1分钟作为值来调用这个函数。 @HostListener('click', ['
浏览 11提问于2019-09-19得票数 1
当使用角6和swagger码元时，我会得到与rxjs相关的类型记录编译器错误
Cannot find module 'rxjs-compat/Observable'
我发现了下面的
我在mac上使用swagger-codegen: stable 2.3.1 (与brew一起安装)。
我很感激你的指导。
更新
我使用以下方法将rxjs-compat添加到angular6项目中
npm install --save-dev rxjs-compat
我现在收到编译器警告，但是编译器错误消失了，该项目似乎正在运行。
浏览 0提问于2018-05-18得票数 3
回答已采纳
我的问题的背景:我试图在我的角度应用程序的打字稿部分提出一个http请求。我只是尝试调用localhost:5000来获取来自Python的数据。
我相信以下两个部分是解决这个问题所需要的。我只是看不出有什么可以替换或安装来修复这个问题。请让我知道。
exam.model.ts
// TS class to represent coordinate data
export class Exam {
constructor(
public Company: string,
public HireDate: string, // should be chang
浏览 1提问于2018-08-06得票数 0
3回答
我曾经用命令构建我的角5项目：
ng build --prod --locale=de --base-href /onlineshopNP/de/ -op dist/de
我已经将我的项目更新为角形6，当我调用命令时，我得到了如下错误：
架构验证失败，出现以下错误：“数据路径”不应具有其他属性(o)。错误:架构验证失败，出现以下错误:数据路径"“不应具有其他属性(o)。在MergeMapSubscriber.registry.compile.pipe.operators_1.concatMap.validatorResult at MergeMapSubscriber._tryNe
浏览 1提问于2018-03-20得票数 10
回答已采纳
https://rxjs-dev.firebaseapp.com/api/ajax/ajax 为什么rxjs ajax操作符返回一个Observable？我认为一个请求返回一个响应，连接就结束了。为什么它是可观察的，而不是单个响应消息？
浏览 13提问于2020-03-30得票数 1
回答已采纳
1回答
我在Angular 6中使用Post方法登录，当我给出正确的登录凭据时，我总是无法登录，当我调试我的代码时，我发现它的发送标头为空，即使我包括我的标头。
这是我在调试时编写的代码，它的显示响应没有定义：
case 'json':default:return res$.pipe(map(function (res) { return res.body; }));
我的Ts文件
import { Injectable } from '@angular/core';
import { RequestOptions, Headers, Response } from &
浏览 4提问于2018-09-01得票数 0
所以，基本上，rxjs是新的，想知道，
我是否需要从Observable.of(数据)或更新的rxjs版本中取消订阅(数据)？
即
import {of} from 'rxjs';
const sub = of(data).subscribe();
这有必要吗？
sub.unsubscribe();
浏览 2提问于2019-04-28得票数 6
2回答
在我的项目中有许多使用异步/等待的代码。但是我想把所有的代码都转到rxjs代码上。
但我不习惯用rxjs。请告诉我将异步/等待代码转换为rxjs的模式或方法。或者请推荐一个例子。
这是我的原始代码(使用异步/等待)
this.userHistory$ = new Subject();
async getUserStatue(userId, query){
const userData = await this.UserApi.getUserInfo(userId, query);
this.userHistory$.next(userData);
}
下面的代码是我试图使用rxjs
浏览 7提问于2022-05-16得票数 0
我得到了这个错误。我在试着用 import { catchError } from 'rxjs/operators' 而不是 import 'rxjs/add/operator/catch' 但是如何使用rxjs/add/operator/do和rxjs/add/operator/toPromise的instaed呢
浏览 9提问于2020-10-07得票数 3
在rxjs5(angular6应用程序)中，我使用
this.router.events .filter(event => event ).map() => this.activatedRoute) .map(路由=> { while (route.firstChild) {en21= route.firstChild；}返回路径；enter code here }) .filter(路由=> route.outlet === 'primary') .mergeMap(路由存储)(事件){(事件标题‘+’+)；this.appDataLogic.ur
浏览 0提问于2018-09-21得票数 4
4回答
我尝试在我的角6项目中导入rxjs计时器，如
import { timer } from 'rxjs/observable/timer';
我也试过，
Rx.Observable.timer(200, 100)
它们不起作用
以下是上的代码
浏览 0提问于2018-05-08得票数 19
回答已采纳
我使用WebSockets与后端WebApi进行通信。除了无法从服务中返回自定义对象外，一切正常。
我使用的是角4.3.4和rxjs 5.4.3。
//ngInit from my component
ngOnInit() {
this.modelsSubscription = this.mainService.getModels().subscribe(models => {
this.models = models;
});
//here's code from my service
import { HttpClient } from '
浏览 1提问于2017-08-28得票数 2
回答已采纳
1回答
在使用vue和rxjs时，是否存在我没有意识到的冲突。我正在运行vue 2，并试图实现一个去抖动函数。使用这些导入：
import { Observable } from 'rxjs';
import 'rxjs/add/observable/fromEvent';
我已经安装了vue和rxjs与vue-rx插件。
它告诉我需要从事件安装npm，如下所示
npm install --save rxjs-compat/add/observable/fromEvent
浏览 2提问于2018-05-05得票数 1
4回答
从角4升级到7，造成问题
、、、、
我已经将我的项目从Angular 4升级到了Angular 7，并且我得到了以下错误：
node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(3,10)：错误TS2305中的错误:模块'"D:/usman/dev_area/code/physician-portal/node_modules/rxjs/Observable"‘没有导出成员“可观察”
node_node/rxjs/观测点.d.ts(1，15)：错误TS2307:无法找到模块‘rxjs-compat/可观测
浏览 0提问于2019-05-17得票数 4
回答已采纳
1回答
最近，我一直试图在一个react应用程序中使用rxjs来提取API请求，这就是我想出的解决方案。
你对这件事的看法如何？
我是否应该跟进一些好的做法呢？
如果有什么好的解决办法，请告诉我。
import axios from 'axios';
import { Observable } from 'rxjs';
import './App.css';
export class App extends Component {
state = {
users: []
};
componentDidMount() {
c
浏览 2提问于2020-03-01得票数 0
3回答
我想得到一个可观察的结果，并做一些更改，然后返回的结果与类型的可观测再次为组件订阅。这是我的密码：
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';
import {Observable} from 'rxjs/Observable';
get_items() {
this.http.
浏览 1提问于2018-06-20得票数 3
回答已采纳
我正在尝试创建一个带有角6的应用程序，并使用NGX模块。我已经更新了rxjs导入如下：
import { Observable, Subject, pipe,of } from 'rxjs';
import { map, takeUntil, tap, catchError } from 'rxjs/operators';
我仍然得到这样的错误：./node_modules/@ultimate/ngxerrors/src/ngxerror.directive.js中的错误不能解析‘rxjs/可观’
浏览 0提问于2018-10-10得票数 0
回答已采纳
我试图在PublishReplay中实现map、Angular6等，但每次都会出现编译错误，即“Observable<{}、{}>”类型上不存在属性'map‘。当我应用其他的rxjs事物时，也会发生类似的情况。
我试过了
导入地图，安装rxjs-compat，编辑tsconfig.json
unifiedSearch: Function = (query: string): Observable<UnifiedSearch> => {
return forkJoin(
this.searchService.gitSearch
浏览 1提问于2019-01-31得票数 0
1回答
我正在创建一个Angular6 crud应用程序，我的数据库中有一个用户列表。当我调用getAllUsers时，我能够检索我的列表，但是它不会显示在UI中。唯一一次在表中看到一行时，是手动输入新用户时，但它不显示条目之前的数据。我做错了什么？
import { Component, OnInit } from '@angular/core';
import { UserDataService } from './user-data.service';
import { User } from './user';
@Component({
s
浏览 1提问于2018-05-17得票数 0
回答已采纳
在一个Range5项目中，我试图处理，但不明白在导入分离的operators时它是如何工作的。
fromPromise 考虑将与 map**:**链接起来
import { fromPromise } from 'rxjs/observable/fromPromise';
import { map } from 'rxjs/operator/map';
使用fromPromise().map()返回错误：fromPromise_1.fromPromise(...).map is not a function
和
import 'rxjs/add/obs
浏览 1提问于2018-03-19得票数 0
回答已采纳
5回答
我正在迁移一个角形5应用程序到最新的CLI和Range6RC，并且我所有的可观察到的导入都被破坏了。我看到了角度6改变了导入的工作方式，但是我找不到任何关于语法是如何工作的明确的参考。
我5岁的时候就有了这个，效果很好：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
现在使用新的语法，
浏览 0提问于2018-04-13得票数 42
回答已采纳
1回答
我有一个返回一个令牌的服务，还有许多订阅者调用这个服务并尝试获取这个令牌。如果我已经有令牌在内存中，我只是返回它，如果没有-提出新的请求，保存令牌，并返回可观察到的这个令牌。
一个时间内多个服务呼叫的问题。因此，其中一些订阅者接收到了不同的令牌。在RxJs中可能存在某种方式，以便先为每个请求创建某种查询，然后等待响应并向所有订阅者发送值？
我对任何帮助都会很合适的。谢谢。
浏览 5提问于2016-06-30得票数 1
回答已采纳
我搞错了
当我转到localhost:8080时，“EmptyError:没有序列中的元素”错误。
我看过的线程，但似乎没有一个答案适用。
我有"rxjs": "^5.5.6"，在我的路由中，我尝试添加pathMatch: 'full',，但错误仍然显示。
我的应用程序选择模块的摘录
const routes: Routes = [
{
pathMatch: 'full', /* added recently for test purposes*/
path: '',
浏览 16提问于2018-06-23得票数 9
2回答
在角应用程序中，从服务器获取数据有不同的方法：
从服务中获得可观察性，并在组件上订阅它
在服务中创建主题，在组件上订阅主题
这两种方法都适用于我，但我不知道该用哪种方法。
First method.从服务中获得可观察性，并在组件上订阅它
article.service.ts
import { Injectable } from '@angular/core';
import { Article } from '../models/article';
import { AngularFirestore } from '@angular/fi
浏览 0提问于2019-08-24得票数 3
回答已采纳
我正在尝试使用Angular6，并使用forkjoin组合一些httpclient.get调用。
目前，如果所有http调用都成功，forkjoin工作得很好。然而，我想捕获和异常，返回一些东西，可能是数组项，然后继续下一个http调用。
import { HttpClient } from '@angular/common/http';
import { Observable, Observer, forkJoin, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators
浏览 0提问于2018-07-06得票数 0
1回答
我有一个类似于描述的案例。
我有一个用户登录服务，它验证用户的令牌是否仍然有效。服务器的响应定义在一个接口中：
export interface UserVerifyResponse {
success: boolean
}
我的目标是创建一个可观察的，它将返回一个布尔值，这取决于用户是否被验证。此代码用于RxJS v6.2：
authenticate(): Observable<boolean> {
return this.http.get<boolean>(
this.apiUrl+'/verify_user'
浏览 0提问于2018-11-10得票数 0
回答已采纳
在角13库中，将rxjs升级到version 7的最佳方法是哪种？使用rxjs6的项目仍然可以使用该库。
我注意到，在从rxjs6升级到rxjs7时，没有像我用于从rxjs 5升级到rxjs 6那样的兼容性库。
我想独立地更新项目和库，但是rxjs6和rxjs7不兼容。
浏览 32提问于2022-05-09得票数 2
回答已采纳
在RxJS中，可观测实例的catch方法和onErrorResumeNext方法似乎几乎没有区别，除了onErrorResumeNext将原始可观测参数与可观测参数连接起来之外，无论是否发生错误。
如果是这样的话，命名是不是有点混乱？因为在出现错误的情况下，onErrorResumeNext的工作方式与catch完全相同：
var testObservable = Rx.Observable.return(1).concat(Rx.Observable.throw("Error"))
// Both onError and onCatch will emit the same
浏览 2提问于2014-10-29得票数 8
回答已采纳
1回答
当我第一次了解angular-redux库时，我认为该库最吸引人的部分是@select装饰器，这意味着我不必每次从商店中选择时都注入store service。
这让我想知道-装饰者是如何访问该服务的？
我研究了源代码，偶然发现了和代码。
显然，当服务初始化时，服务的static instance被保存，并且decorator访问这个实例。
我想知道这种做法是否可以接受，因为我喜欢这个想法，而且我自己也用它为我的服务创建了decorators和rxjs operators，但是保存一个单例的想法对我来说仍然是相当奇怪的，感觉就像一个奇怪的黑客。
再一次，我希望您对这种做法的可接受性有什么看法，
浏览 5提问于2017-07-08得票数 2
这是使用rxjs操作符的示例代码，我想打印/获取第二个最后的值。
类型标
import { from } from 'rxjs';
import { map, last } from 'rxjs/operators';
//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//add 10 to each value
const example = source.pipe(map(val => val + 10)).pipe(last());
//output: 11,12,13,14,15
c
浏览 6提问于2020-01-13得票数 7
回答已采纳
2回答
目前，我在angular6的一个项目中工作，我正确地配置了ng-block-ui (我已经在angular5中的一个项目中使用了ng-block-ui )，但是在组件模板中绑定时，我遇到了如下关于ng-block-ui的问题
block-ui' is not a known element:
1. If 'block-ui' is an Angular component, then verify that it is part of this module.
2. If 'block-ui' is a Web Component then add &#
浏览 4提问于2018-06-01得票数 0
1回答
我试图在一个可以观察到的简单代码中抛出一个错误：
return Observable.create((observer) => {
observer.throw(new Error('Test'));
});
然而，出于某种原因，throw还没有定义。我不知道为什么在我们班的第一名，我有以下的重要内容：
import 'rxjs/observable/throw';
我也尝试过：
import 'rxjs/Observable/throw';
以及：
import 'rxjs/add/observable/throw';
浏览 5提问于2016-09-01得票数 0
回答已采纳
我对“声明合并”做了简单的测试。
在rxjs.Ovservable中添加hello方法很简单。
import 'rxjs';
import { Observable } from 'rxjs/Observable';
export function hello <T>(this: Observable<T> ): Observable<T> {
console.log('hello');
return this;
}
Observable.prototype.hello = hello;
浏览 2提问于2017-07-21得票数 2
回答已采纳
1回答
编译Angular6项目时出错
、、、、
这是我第一次尝试构建一个Angular项目，如果我不能很好地理解所有内容，很抱歉。我在Google上找到了命令"ng build --prod“，所以我尝试了一下。一开始，一切看起来都很正常，直到出现错误：
ERROR in node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.
node_modules/ngx-carousel/src/ngx-carousel/ngx-carousel.component.d.ts(
浏览 5提问于2018-07-23得票数 0
回答已采纳
2回答
它似乎无法使我的服务启动和运行的角度6。我试图调用任何函数在CoreService，但它似乎不工作。
原因是什么？
错误：
error TS2339: Property 'query' does not exist on type 'typeof CoreService'.
这就是我调用CoreService函数的地方。
import { CoreService} from "./../core.service";
CoreService.query('login','POST',{username: t
浏览 0提问于2018-05-24得票数 0
回答已采纳
1回答
我是rxjs的新手，正在努力解决异常处理问题。
采用以下代码
let sub = new Subject();
let observer1:Observer<String> = {
next : v => {
console.log("next1-" + v);
if(v==='fail') {
throw new Error("fail1");
}
},
error : e => console.error("er
浏览 1提问于2018-06-02得票数 4
我想从Angular5迁移到Angular6，遵循
我尝试执行这三个命令，将.angular-cli.json更新为angular.json
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
不幸的是，仍然没有angular.json。如果我试图运行ng serve，就会得到以下错误：
Local workspace file ('angular.json') could not be found.
所以我把.angular-cli.json重命名为angular.json.但
浏览 1提问于2018-06-03得票数 3
我正在学习编写一个rxjs操作符，当我这样写的时候：
function map<T, R>(project: (value: T) => R): OperatorFunction<T, R> {
return function mapOperation(source$: Observable<T>): Observable<R> {
if (typeof project !== "function") {
throw new TypeError("argument is not a funct
浏览 35提问于2020-02-29得票数 2
回答已采纳
我在我的rxjs应用程序中注意到，rxjs操作符，如switchMap、map等，不起作用。(我的IDE也给出了一个提示。)当然，我运行了以下代码。如果我将switchMap替换为subscribe，就会在控制台中看到“返回的值”。
知道运营商为什么不工作吗？
import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/switchMap';
@Component(
浏览 1提问于2016-12-05得票数 1
回答已采纳
1回答
我正在尝试创建一个全局变量来处理何时在我的网站上显示加载程序。我跟踪了，但是我得到了以下错误。
泛型类型‘观察者’需要一行中的一个类型参数
this.ShowLoaderChange = new Observable((observer:Observer){
此外，我看不出他们在哪里为ChangeObserver声明了变量，就像我在这里使用的那样：
this.ShowLoaderChangeObserver = observer;
还有这里
this.ShowLoaderChangeObserver.next(this.ShowLoader);
import { Observer } fr
浏览 2提问于2017-05-16得票数 0
回答已采纳
我正在尝试对可观测到的
import { Observable } from 'rxjs/Observable';
declare module 'rxjs/Observable' {
interface Observable<T> {
customFilter<T>(this: Observable<T>): Observable<T>;
}
}
function customFilter<T>(this: Observable<T>) {
return this;
浏览 0提问于2018-10-26得票数 4
回答已采纳
我对nestJS和RxJS很陌生，并尝试为http请求使用axios。
我注意到在使用API时有两个选项。
使用HttpService.get。它返回可观测值，而together.using HttpService.axiosRef.get应该使用RxJS。它还承诺。
两个选项之间有什么区别？？
(例如)性能，捕捉错误。等等..。
谢谢。
浏览 15提问于2022-07-26得票数 0
回答已采纳
可以从rxjs和rxjs/操作符导入combineLatest函数。
当我从rxjs/操作符导入它时(就像导入combineAll一样，我得到以下错误：
TS2339: Property 'subscribe' does not exist on type 'OperatorFunction<{}, [{}, number, number, number]>'
我使用了以下代码片段：
import { timer } from "rxjs";
import { combineLatest } from "rxjs/operat
浏览 0提问于2018-10-23得票数 4
回答已采纳
3回答
在我下面的Ionic 3代码摘录中，即使添加了map的rxjs操作符的所有导入，问题仍然存在。
TypeError: this.http.get(.).map不是函数
我的导入已经添加，代码如下：
import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HTTP } from "@ionic-
浏览 0提问于2018-08-19得票数 3
我在一个服务中有以下代码，它可以从Http请求中创建一个可观察到的。
const httpObservable = this.http.post(url, JSON.stringify(request))
.map((res: Response) => res.json())
.catch((error, caught) => {
console.log('There was an API error for ' + url);
console.log('Rethrowing');
return
浏览 4提问于2017-08-04得票数 3
2回答
我正在使用angular 7。这是我的服务。 get(){
return this.http.post(this.url).pipe(
catchError(this.handleError)
)
} 这是错误处理程序代码。 handleError(errorResponse: HttpErrorResponse) {
if (errorResponse.error instanceof ErrorEvent) {
return throwError(errorResponse.error.message)
} else {
switch (error
浏览 28提问于2019-02-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
