rxjs 相关问题

JavaScript的Reactive Extensions（RxJS）是一组库，用于使用可观察集合和Array Extras样式组合来编写异步和基于事件的程序。

import { Injectable } from '@angular/core'; import { BehaviorSubject, map, Observable, shareReplay } from 'rxjs'; import { HttpClient } from '@angular/common/http'; import { Asset } from '../interfaces/coin-api/asset'; @Injectable({ providedIn: 'root' }) export class CoinApiStore { private subject = new BehaviorSubject<Asset[]>([]); private data$ : Observable<Asset[]> = this.subject.asObservable(); constructor(private http: HttpClient) { this.data$ = this.getDataFromCoinApi(); } public getData(): Observable<Asset[]> { return this.data$.pipe( map(assets => assets.sort(this.sortAssets).slice(0, 10)) ); } public getFilteredData(value: string): Observable<Asset[]> { return this.data$.pipe( map(assets => assets.filter(asset => asset.name?.toLocaleUpperCase().includes(value)).sort(this.sortAssets).slice(0, 10)) ); } private getDataFromCoinApi(): Observable<Asset[]> { const key = process.env['API_KEY']; const url = `https://rest.coinapi.io/v1/assets?apikey=${key}`; return this.http.get<Asset[]>(url).pipe(shareReplay(1)); } private sortAssets(a1: Asset, a2: Asset) { return (a1.name ?? a1.asset_id).localeCompare((a2.name ?? a2.asset_id)); } }

angular rxjs angular-material mat-autocomplete

回答 1 投票 0

访问API的进度定期更新并节省进度

在我的Nestjs应用程序中，我正在尝试从完成10-20分钟的时间进行工作。因此，用户单击一个按钮，称为API，该按钮有些开始进行

node.js typescript rxjs nestjs

回答 1 投票 0

角ngxs auth Guard：如何使用用户状态解决种族条件

angular authentication rxjs

回答 1 投票 0

启动多个依赖另一个可观察的发射值的独立请求

我需要在一个依赖另一个可观察到的值的组件中启动3个独立的请求。

angular typescript rxjs

回答 2 投票 0

我使用

todial tagiond添加了tag 对于已经选择的值未显示dropdown。它仅适用于可用的未选择值的打字。

javascript angular rxjs angular-ngselect

回答 2 投票 0

如何捕获错误并继续在rxjs中执行序列？

javascript rxjs reactivex

回答 5 投票 0

与RXJS SwitchMap和AppCues脚本相关联合会中的Microfrontend Architection

问题描述：

javascript angular rxjs micro-frontend webpack-module-federation

回答 1 投票 0

任期信号值在子组件中延迟，如果该值以``''键（）`

I有一个智能组件，该组件直接依赖该服务，并沿信号和事件传递给儿童哑巴组件，该组件通过采取取决于当前状态值的操作来对事件做出反应。我的问题是，由于服务的信号以

angular rxjs signals parent-child angular-signals

回答 1 投票 0

如何简化rx.js功能，只有一个订阅

import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { FormWrapperComponent } from '@app/components/form-wrapper/form-wrapper.component'; import { EHttpResponseCode } from '@app/enums/http-response'; import { IPasswordForm } from '@app/interfaces/password-form.interface'; import { AppPasswordService } from '@app/services/app-password.service'; import { ModalService } from '@app/services/modal.service'; import { environment } from '@environments/environment'; import { I18NextModule, I18NextPipe } from 'angular-i18next'; import { ToastrService } from 'ngx-toastr'; import { debounceTime, distinctUntilChanged, Subscription } from 'rxjs'; @Component({ selector: 'app-application-password-modal', imports: [ MatInputModule, MatFormFieldModule, I18NextModule, FormsModule, ReactiveFormsModule, FormWrapperComponent, ], templateUrl: './application-password-modal.component.html', styleUrl: './application-password-modal.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class ApplicationPasswordModalComponent implements OnInit, OnDestroy { /** * @description * Property passwordForm is a FormGroup that contains the form to fill up password * and have access to change database config * * @type {FormGroup<IPasswordForm>} */ passwordForm: FormGroup<IPasswordForm>; /** * Subscription to password values changes * @type {Subscription} */ valuesChangesSubscription: Subscription = new Subscription(); /** * Subscription to verify password * @type {Subscription | null} */ verifyPasswordSubscription: Subscription | null = null; /** * @descriptio * Constructor * * @param {AppPasswordService} appPasswordService * @param {ModalService} modalService * @param {ToastrService} toastr * @param {I18NextPipe} i18nextPipe */ constructor( private appPasswordService: AppPasswordService, private modalService: ModalService, private toastr: ToastrService, private i18nextPipe: I18NextPipe ) { this.passwordForm = new FormGroup<IPasswordForm>({ password: new FormControl<string | null>('', []), }); } /** * @description * Lifecycle method * Update form values from session storage is stored data are present * and subscribing to form value changes to log form validation from backend * * @returns {void} */ ngOnInit(): void { if (!environment.production) { this.toastr.info( this.i18nextPipe.transform('In developer mode password is dbbrix.') ); } /** * Subscribe to password form value changes * Debounce logic, 1 second delay * Distinct until changed form data, only emit if value has changed * If data are present, data are sended to backend and if data are correct, modal is closed */ this.valuesChangesSubscription = this.passwordForm.valueChanges .pipe( debounceTime(1000), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)) ) .subscribe(() => { if (this.passwordForm.valid) { const passwordControl = this.passwordForm.get('password'); const data = { password: this.passwordForm.value.password ?? '', }; this.verifyPasswordSubscription = this.appPasswordService .verifyAppPassword(data) .subscribe({ next: res => { if ( res.status === EHttpResponseCode.OK || res.status === EHttpResponseCode.CREATED ) { this.modalService.closeApplicationPasswordModal(); this.toastr.success( this.i18nextPipe.transform( 'App password is correct. Now You can fill up database config.' ) ); } if (res.status === EHttpResponseCode.UNAUTHORIZED) { passwordControl?.setErrors({ incorrect: true }); this.toastr.error( this.i18nextPipe.transform( 'App password is incorrect. Please try again.' ) ); } }, error: () => { if (!environment.production) { if (this.passwordForm.value.password === 'password') { passwordControl?.setErrors(null); this.modalService.closeApplicationPasswordModal(); this.toastr.success( this.i18nextPipe.transform( 'App password is correct. Now You can fill up database config.' ) ); } else { passwordControl?.setErrors({ incorrect: true }); this.toastr.error( this.i18nextPipe.transform( 'App password is incorrect. Please try again.' ) ); } } }, }); } }); } ngOnDestroy(): void { this.verifyPasswordSubscription?.unsubscribe(); this.valuesChangesSubscription?.unsubscribe(); } }

angular rxjs

回答 1 投票 0

组：根据传入值修改现有组

javascript rxjs rxjs-observables

回答 1 投票 0

角信号对局部状态的变化反应，但对输入信号的变化不反应

javascript angular typescript rxjs angular-signals

回答 1 投票 0

rxjs等于array.some（）？

rxjs

回答 5 投票 0

如何阻止异步事件传播从Promises TypeScript +RXJS