天道酬勤,学无止境

behaviorsubject

尝试从第二个组件中获取时,行为主题值为空(Behaviour subject value is empty when trying to fetch from a second component)

问题 我正在尝试使用 BehaviourSubject 和共享服务在 Angular 8 中的两个组件之间共享数据。 组件 1 中的代码如下所示。 constructor(private appSharedService: AppSharedService) { } ngOnInit() { this.appSharedService.getCars() .subscribe(response => { this.cars = response; this.appSharedService.updateCarsList(this.cars); }, error => { console.log(error); }); } 共享应用共享服务中的代码是 export class AppSharedService { carsSubject : BehaviorSubject<Car[]> = new BehaviorSubject<Car[]>([]); cars: Observable<Car[]>; constructor(private http: HttpClient) { } getCars (): Observable<Car[]> { if (!this.cars) { this.cars = this.http.get<Car[]>('url', headers)

2021-10-25 16:44:58    分类:技术分享    angular   rxjs   observable   behaviorsubject

如何构建一个服务来获取异步值,但也可以对该数据执行任务,例如过滤?(How to build a service that gets values async but also perfoms tasks on that data, like filtering?)

问题 我有一项“在 root 中提供”的服务: 从 API 获取一次数据应该处理该数据的映射如果需要,应该将该数据提供给其他组件 在应用程序的整个生命周期中不需要重新加载此数据。 它仅在用户刷新浏览器时重新加载。 所有数据都将在某个时候使用 - 因此在每个getOneById()上发出 http 请求是没有意义的。 在这种情况下,过滤器速度更快。 服务的模型看起来像这样: export class MyTypeService { items: MyType[] = []; items$ = new BehaviorSubject<MyType[]>(this.items); constructor(private http: HttpClient) { } getData(): Subscription { return this.http.get<SearchResult>( 'path' ).pipe( map((response: any) => { this.items = response; return this.items; }), catchError(error => { // removed from the question for simplicty this.handleError(error); return of([]); }) ).subscribe

2021-10-25 01:05:44    分类:技术分享    angular   typescript   rxjs   behaviorsubject   angular8

ViewDestroyedError:尝试使用被破坏的视图(ViewDestroyedError: Attempt to use a destroyed view)

问题 (使用 8 角) 我的代码目前使用行为主题存在问题。 组件 A 通过组件工厂创建另一个组件 B。 现在,组件 A 订阅了组件 B,知道何时删除它是状态。 在这种情况下,每当组件 B 出现错误时,组件 A 都会改变自己的状态并调用组件 B.destroy()。 但是,每当我运行这个销毁方法时,我都会在日志中收到一条错误消息 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges 在我移除它之前,我确实取消了更改检测器,但这似乎没有帮助。 这是代码: createComponent(): void { this.logger.debug('Widget: creating component based on type provided in config.'); this.setWidgetLoading(true); this.componentFactory.createComponent(this.content, this.componentConfig).subscribe((componentRef) => { this.componentRef = componentRef; this.componentRef.instance.componentStatus

2021-10-24 23:08:49    分类:技术分享    angular   components   observable   destroy   behaviorsubject

nestjs 中的 Observables - 异步读取文件(Observables in nestjs - Reading a file asynchronously)

问题 我正在尝试异步读取 json 文件并将其作为响应(作为 rxjs 可观察数据)发送出去的用例。 这是我使用的服务 import { logger } from './../../shared/utils/logger'; import { Injectable } from '@nestjs/common'; import * as fs from 'fs'; import * as path from 'path'; import { BehaviorSubject, Observable, pipe, of, from, throwError, merge} from 'rxjs'; import { map, filter, scan, take, debounce, switchMap, retry, catchError, mergeMap, delay, zip, tap, mapTo } from 'rxjs/operators'; import { HttpResponseModel } from '../model/config.model'; import { isNullOrUndefined } from 'util'; @Injectable() export class NewProviderService { serviceSubject

2021-10-24 11:43:03    分类:技术分享    node.js   rxjs   observable   nestjs   behaviorsubject

How to build a service that gets values async but also perfoms tasks on that data, like filtering?

I have a service "provided in root" that: gets data once from an API should handle a mapping on that data should provide that data to other components if needed This data doesn't need to be reloaded throughout the lifecycle of the app. It's only reloaded when the user refreshes the browser. All of the data is going to be used at some point - so it makes no sense to make http requests on each getOneById(). A filter is faster in this case. The mockup of the service looks something like this: export class MyTypeService { items: MyType[] = []; items$ = new BehaviorSubject<MyType[]>(this.items)

2021-10-24 05:55:32    分类:问答    angular   typescript   rxjs   behaviorsubject   angular8

将元素添加到 Angular2+ 中数组的 rxjs BehaviorSubject 或 Subject(Add elements to rxjs BehaviorSubject or Subject of an array in Angular2+)

问题 我正在阅读本教程的“无关组件:与服务共享数据”部分中有关如何在 Angular 中的无关组件之间共享数据的内容。 我看到这个例子如何处理他们试图在他们的组件之间共享的字符串,但我的数据类型有点复杂: 也就是说,我认为我的 BehaviorSubject 应该是这样的: private currentPopulationSource: BehaviorSubject<Population> = new BehaviorSubject<Population>(new Population(new Array<Organism>())); 我的种群模型只是一系列生物体的容器: import { Organism } from './organism.model'; export class Population { private individuals: any; constructor(individuals: Organism[]){ this.individuals = individuals; } getIndividuals(){ return this.individuals; } } 我有一个有机体的实例,我们称之为有机体1。 我想将它添加到包含在 Population 模型中的个人数组,并且我希望多个不相关的组件订阅人口 BehaviorSubject

2021-10-23 18:47:27    分类:技术分享    angular   service   rxjs   behaviorsubject

完整日历 - 从 observable 传递事件数据 - 未显示在日历上(full calendar - passing event data from observable - not showing up on calendar)

问题 我正在将 ap-fullcalendar 用于角度/打字稿。 我有一个数据服务,我从我的数据库中获取日历的事件,我将数据包装在一个 Behavior Subject 中并订阅它,并使其成为另一个函数的可观察对象。 我有一个数据服务,因为我对同一个 observable 有多个订阅。 在日历所在的组件中,我订阅了数据。 但是,由于某种原因,事件没有正确传递到日历并且不会显示。 我已经手动输入了一些事件值,以检查日历是否正常工作。 我已经输出了我从我的服务中得到的东西(如下所示),看起来不错。 可能是什么问题? 数据服务: @Injectable() export class SubjectEventsService { allData: EventSchema[] = new Array<EventSchema>(); allData$: BehaviorSubject<EventSchema[]>; constructor(private afs : AngularFirestore) { //Get subjectEvents collection on initialise this.subjectEventCollection = this.afs.collection('subjectEvents'); this.getSubjectEvents(); }

2021-10-23 15:53:08    分类:技术分享    angular   rxjs   fullcalendar   observable   behaviorsubject

为什么 RXJS angular behaviorSubject 发出多个值(Why RXJS angular behaviorSubject emit mutiple values)

问题 在此处输入图像描述我使用BehaviorSubject在我的应用程序组件之间共享数据,由于BehaviorSubject多次发射相同的值,我遇到了性能问题。 例如,我调用 http 从后端获取团队对象并将其存储在一个 behaviorSubject 中,许多组件订阅了这个BehaviorSubject 。 每个组件从订阅中获取值并对值进行一系列操作。 问题的本质是多次发出该值,并且每个组件都执行几次所有序列。 我的猜测是BehaviorSubject以订阅者数量的形式发出值。 我在谷歌中找不到任何对我来说很奇怪的东西,我错过了什么? 与部署相比,团队在本地发出值的次数不同。 您可以看到“重新获取返回值”的打印,它是来自 http 的实际响应。 回答1 您可以通过只接受与上一个不同的值来部分修复它,从而连续几次跳过评估相同的值。 此外,如果您查询的数据可以与之前的查询相同,那么无论如何添加以下内容可能是个好主意: import { distinctUntilChanged } from 'rxjs/operators'; this.myService.myObservable .pipe(distinctUntilChanged()) .subscribe(value => { console.log(value); })

2021-10-23 10:50:15    分类:技术分享    angular   rxjs   behaviorsubject

如何使用 service 和 observable 在组件之间共享数据?(How to share data between components using service and observable?)

问题 嗨,我是 angular 2+ 的新手,我正在尝试在两个组件之间共享数据,但第二个组件没有从服务中检索数据,它获取了一个空对象。 服务 - 使用 rxjs BehaviorSubject 来保持对象 import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Observable } from 'rxjs/Observable'; @Injectable() export class PostsService { response: any = {}; private messageResponse = new BehaviorSubject(this.response); currentResponse = this.messageResponse.asObservable(); constructor(private http: Http) { } // Get all posts from the API getAllPosts() { return this.http.get('/api/posts') .map(res => { this.messageResponse.next(res.json()); return res.json(); }).catch(err => { console

2021-10-22 20:18:28    分类:技术分享    angular   rxjs   observable   angular-services   behaviorsubject

Behaviour subject value is empty when trying to fetch from a second component

I am trying to share data between two components in Angular 8 using BehaviourSubject and a shared service. The code in component 1 is shown below. constructor(private appSharedService: AppSharedService) { } ngOnInit() { this.appSharedService.getCars() .subscribe(response => { this.cars = response; this.appSharedService.updateCarsList(this.cars); }, error => { console.log(error); }); } The code in the shared app-shared service is export class AppSharedService { carsSubject : BehaviorSubject<Car[]> = new BehaviorSubject<Car[]>([]); cars: Observable<Car[]>; constructor(private http: HttpClient) {

2021-10-20 10:34:22    分类:问答    angular   rxjs   observable   behaviorsubject