rxjs

我正在编写一个 APIAngular2和NodeJS，我正在为我的 ِAPI 实现服务，该 API 应该获取任务列表并显示它。 import {Injectable} from '@angular/core'; import {Http, Headers} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class TaskService{ constructor(private http:Http){ console.log('Task Service Initialized...'); } getTasks(){ return this.http.get('http://localhost:3000/api/tasks') .map(res => res.json()); } } 为了我的getTask功能（如果我错了请纠正我）.map()函数接受我的响应并将其格式化为值数组。 import { Component } from '@angular/core'; import {TaskService} from '../../services/task.service'; @Component({ moduleId: module.id, selector: 'tasks', templateUrl: 'tasks.component.html', }) export class TasksComponent { constructor(private taskService:TaskService){ this.taskService.getTasks() .subscribe(tasks =>{ console.log(tasks); }) } } 我想了解这是什么.subscribe()函数确实如此，但我找不到任何相关信息。 答案 这.subscribe()功能类似于Promise.then(),.catch()和.finally()中的方法jQuery，但不是处理promise它涉及Observables。...

我一直在学习Angular 4，一切都顺利进行，直到我试图实施服务中的操控性。我正在尝试使用" RXJS"捕获和投掷，但是控制台中的功能错误。 import { Injectable } from '@angular/core'; import { Http } from "@angular/http"; import { Observable } from 'rxjs/observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import { AppError } from "../app/common/app.error"; import { NotFoundError } from "../app/common/not-found-error"; import { BadInput } from "../app/common/bad-input"; @Injectable() export class PostService { private url = "https://jsonplaceholder.typicode.com/posts"; constructor(private http: Http) { } deletepost(post){ // return this.http.delete(this.url + '/' + post.id) // Hard-coded id to test 404 return this....

是唯一的区别Observable.of和Observable.from参数格式？像Function.prototype.call和Function.prototype.apply？ Observable.of(1,2,3).subscribe(() => {}) Observable.from([1,2,3]).subscribe(() => {}) 答案 不完全的。将数组传递到Observable.from，它和它之间的唯一区别Observable.of是通过参数通过的方式。 然而，Observable.from会接受一个争论那是 一个可订阅的对象，一个承诺，可观察的样本，数组，迭代或类似数组的对象要转换 没有类似的行为Observable.of - 总是只接受值，并且不执行不转换。 来自: stackoverflow.com

Typescript code: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes(): Observable<Hero[]> { return of(HEROES); } } error info: 错误 TS2307：找不到模块"rxjs-compat/Observable"。 package.json file with Angular version: 答案 我将原来的代码替换为import { Observable, of } from 'rxjs'，问题就解决了。 来自: stackoverflow.com

我刚刚从 Angular 2 升级beta16 到beta17 ，这又需要 rxjs 5.0.0-beta.6。 https://github.com/angular/angular/blob/master/CHANGELOG.md）在 beta16 中，所有关于 Observable/map 功能都运行良好。 属性"map"在"Observable"类型上不存在（在我使用带有可观察对象的地图的任何地方） c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16)：错误 TS2435：环境模块不能嵌套在其他模块或命名空间中。 c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16)：错误 TS2436：环境模块声明无法指定相对模块名称。 我看过这个问题/答案，但它没有解决问题：Angular2 beta.12 和 RxJs 5 beta.3 的可观察错误 我的 appBoot.ts 看起来像这样（我已经引用了 rxjs/map）： ///<reference path="./../node_modules/angular2/typings/browser.d.ts"/> import {bootstrap} from "angular2/platform/browser"; import {ROUTER_PROVIDERS} from 'angular2/router'; import {HTTP_PROVIDERS} from 'angular2/http'; [stuff] import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import {enableProdMode} from 'angular2/core'; import { Title } from 'angular2/platform/browser'; //enableProdMode(); bootstrap(AppDesktopComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, Title ]); 有人知道发生了什么吗？ 答案 我将 gulp-typescript 插件升级到最新版本（2.13.0），现在它可以顺利编译。...

在Angular 4更改检测系统中显示当前时间的正确（规范）方法是什么？ 问题如下：根据定义，当前时间不断变化。但是，Angular 4变更检测系统无法检测到它。由于这个原因，我认为有必要明确致电ChangeDetectorRef::detectChanges。但是，在调用此方法的过程中，当前时间自然会改变其价值。这导致ExpressionChangedAfterItHasBeenCheckedError。在以下示例中（见现场）此错误在加载页面后几秒钟内出现： import { Component, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'my-app', template: `{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br /> {{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}<br />{{ now }}` }) export class AppComponent { get now() : string { return Date(); } constructor(cd: ChangeDetectorRef) { setInterval(function() { cd....

我正在将Angular 5应用程序迁移到最新的CLI和Angular 6 RC，我所有可观察到的进口都被打破了。我看到Angular 6改变了导入的工作方式，但是我找不到有关语法如何工作的明确参考。 我在5中效果很好，效果很好： import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; 现在有了新的语法，我看到 import { Observable, Subject, throwError} from 'rxjs'; import { map } from 'rxjs/operators'; 前两行编译，但我不知道如何获得捕获和投掷。.map（）在代码中使用时还会引发构建错误。 任何人都有提到应该如何工作的人？ 答案 从RXJS 5.5，，，，catch已重命名为catchError功能以避免名称冲突。 由于将操作员独立于可观察的可用，因此操作员名称无法与JavaScript关键字限制冲突。因此，某些操作员的可管道版本的名称已更改。 import { catchError } from 'rxjs/operators'; 为了throw您可以使用ErrorObservable。 import { ErrorObservable } from 'rxjs/observable/ErrorObservable'; ErrorObservable.create(new Error("oops")); rxjs 6 而不是使用 ErrorObservableThrowerror。 import { throwError } from 'rxjs' throwError(new Error("oops")); 另外，您现在必须通过管道传输运算符，而不是直接将它们链接到可观察的对象 来自: stackoverflow.com

我在Angular中遇到HTTP的问题。 我只想GETAJSON列出并在视图中显示。 服务等级 import {Injectable} from "angular2/core"; import {Hall} from "./hall"; import {Http} from "angular2/http"; @Injectable() export class HallService { public http:Http; public static PATH:string = 'app/backend/' constructor(http:Http) { this.http=http; } getHalls() { return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json()); } } 在HallListComponent我打电话给getHalls服务中的方法： export class HallListComponent implements OnInit { public halls:Hall[]; public _selectedId:number; constructor(private _router:Router, private _routeParams:RouteParams, private _service:HallService) { this._selectedId = +_routeParams.get('id'); } ngOnInit() { this._service.getHalls().subscribe((halls:Hall[])=>{ this.halls=halls; }); } } 但是，我有一个例外：...

我一直在寻找理解这三个： 主题 行为主体 重播主题 我想使用它们并知道何时和为什么使用它们，使用它们有什么好处，尽管我已经阅读了文档，观看了教程并搜索了谷歌，但我对此没有任何意义。 那么他们的目的是什么？ 我更喜欢一个干净的解释，而不仅仅是"a b => c 你订阅了……" 谢谢 答案 这实际上取决于行为和语义。 Subject- 订阅者只会获得已发布的已发布值后订阅。 BehaviorSubject- 最后一个值被缓存。 这BehaviorSubject使用初始值进行初始化。null。 ReplaySubject- 它可以缓存最多指定数量的排放。 如果你初始化一个ReplaySubject缓冲区大小为1，那么实际上表现 就像一个BehaviorSubject。null像下面的情况一样检查BehaviorSubject初始化为null。 所以这实际上取决于您期望的行为（至于使用哪一种）。BehaviorSubject因为你真正想要表达的是"随时间的价值"语义。ReplaySubject初始化为1。 你想要什么避免 正在使用香草Subject当你真正需要的是一些缓存行为时。Subject。 也可以看看： RxJS 主题是什么以及使用它们的好处是什么？ 来自: stackoverflow.com

我什么时候应该存储Subscription实例并调用unsubscribe()在此期间ngOnDestroy生命周期，什么时候可以忽略它们？ 保存所有订阅都将很多混乱引入组件代码。 HTTP客户指南忽略这样的订阅： getHeroes() { this.heroService.getHeroes() .subscribe( heroes => this.heroes = heroes, error => this.errorMessage = <any>error); } 在同一时间路线和导航指南说： 最终，我们将在其他地方导航。路由器将从DOM中删除此组件并将其销毁。在此之前，我们需要清理自己。具体而言，我们必须在Angular摧毁组件之前取消订阅。不这样做可能会造成内存泄漏。 我们退订了Observable在里面ngOnDestroy方法。 private sub: any; ngOnInit() { this.sub = this.route.params.subscribe(params => { let id = +params['id']; // (+) converts string 'id' to a number this.service.getHero(id).then(hero => this.hero = hero); }); } ngOnDestroy() { this.sub.unsubscribe(); } 答案 TL;DR 对于这个问题，有两种可观察到的东西 - finite 价值和infinite价值。 http可观察到的结果finite （1）值和类似DOM事件的侦听器可观察的产生infinite值。 如果您手动打电话subscribe（不使用异步管），然后unsubscribe从infinite可观察到。 不用担心finiteRXJ会照顾他们。 资料来源： 我在Angular的Gitter中追踪了Rob Wormald的答案这里。 他说（为了清楚和重点，我重组是我的）： 如果它是a single-value-sequence （就像http请求一样）manual cleanup is unnecessary（假设您手动订阅控制器）...

现在，我有一个初始页面，其中有三个链接。单击最后一个"朋友"链接后，将启动适当的朋友组件。在那里，我想获取/获取我的朋友列出的列表。到现在为止，一切都很好。但是我仍然是使用RXJS的可观察到的MAP，订阅概念的Angular2 HTTP服务的新手。我试图理解它并阅读几篇文章，但是直到我从事实践工作之前，我都不会正确理解这些概念。 在这里，我已经制作了PLNKR，除了HTTP相关的工作外，它正在工作。 普林克尔 myfriends.ts import {Component,View,CORE_DIRECTIVES} from 'angular2/core'; import {Http, Response,HTTP_PROVIDERS} from 'angular2/http'; import 'rxjs/Rx'; @Component({ template: ` <h1>My Friends</h1> <ul> <li *ngFor="#frnd of result"> {{frnd.name}} is {{frnd.age}} years old. </li> </ul> `, directive:[CORE_DIRECTIVES] }) export class FriendsList{ result:Array<Object>; constructor(http: Http) { console.log("Friends are being called"); // below code is new for me. So please show me correct way how to do it and please explain about .map and ....

我有一个通过HTTP从服务中获取数据的组件，问题是我不想每次显示此组件时都会达到API后端。我希望我的服务检查数据是否在存储器中，如果是内存，请返回可观察到的数组中的内存中的可观察，如果没有，请进行HTTP请求。 我的组件 import {Component, OnInit } from 'angular2/core'; import {Router} from 'angular2/router'; import {Contact} from './contact'; import {ContactService} from './contact.service'; @Component({ selector: 'contacts', templateUrl: 'app/contacts/contacts.component.html' }) export class ContactsComponent implements OnInit { contacts: Contact[]; errorMessage: string; constructor( private router: Router, private contactService: ContactService) { } ngOnInit() { this.getContacts(); } getContacts() { this.contactService.getContacts() .subscribe( contacts => this.contacts = contacts, error => this.errorMessage = <any>error ); } } 我的服务 import {Injectable} from 'angular2/core'; import {Http, Response, Headers, RequestOptions} from 'angular2/http'; import {Contact} from '....

我有一个 Observable 数组，我想按名称过滤/查找项目。 项目服务.ts import { Injectable } from '@angular/core'; import { Project } from "../classes/project"; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import { Http } from '@angular/http'; @Injectable() export class ProjectService { private projects: Observable<Project[]>; constructor(private http: Http) { this.loadFromServer(); } getProjects(): Observable<Project[]> { return this.projects; } private loadFromServer() { this.projects = this.http.get('/api/projects').map(res => res.json()); } getProjectByName(name: String) { return this.projects.filter(proj => proj.name === name); } } 项目类...

我收到一个错误 node_modules/rxjs/internal/types.d.ts(81,44): 错误 TS1005: ‘;’ 安装 Angular 6 后。 检查错误： ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected. 答案 此问题可能是由于版本不匹配造成的。package.json文件。 Step 1 ： 去package.json并修改"rxjs": "^6.0.0"到"rxjs": "6.0.0" Step 2 跑步npm install在你的项目中。 无需更改打字稿版本。 "typescript": "~2.7.2"） Edit: 如果您正在使用rxjs-compat那么您还需要执行以下操作才能解决问题。rxjs-compat版本来自"rxjs-compat": "^6.2.2"到"rxjs-compat": "6.2.2" 希望这会有所帮助！ 来自: stackoverflow.com

我在导入时遇到问题Observable.of在我的项目中发挥作用。 import {Observable} from 'rxjs/Observable'; 在我的代码中我这样使用它： return Observable.of(res); 有任何想法吗？ 答案 事实上我的进口搞砸了。 import 'rxjs/add/observable/of'; 来自: stackoverflow.com