Rxjs 不计算 Angular 服务中的记录

Question

我有一个简单的服务，我想计算从后端服务读取的记录。 虽然我的数据记录已正确加载，但我无法让.pipe(count())返回记录计数。

我期望数据在组件中被过滤，但我确实想显示完整的记录数。 我可以遍历服务中的结果来设置计数，这很有效，但我认为管道/计数方法是做同样的事情。

export class AlertsService implements OnDestroy {
    private ApiEndPoint: string = '/alerts';
    private Data$_: BehaviorSubject<Array<LIB_Alert_ResponseDTO>> = new BehaviorSubject<Array<LIB_Alert_ResponseDTO>>(new Array<LIB_Alert_ResponseDTO>());
    private LastUpdated_: Date = new Date();
    private Source$: Subscription = new Subscription();

    constructor(
        private Http_: HttpClient,
    ) {}

    get Alerts$(): Observable<Array<LIB_Alert_ResponseDTO>> {
        return this.Data$_.asObservable();
    }

    // This always leaves me with 0
    get Count$(): Observable<number> {
        return this.Alerts$.pipe(count()); 
    }

    // This method works
    get Count2$(): Observable<number> {
        let Count: number = 0;
        this.Alerts$.forEach( (Alerts: Array<LIB_Alert_ResponseDTO>) => {
            Count = Alerts.length;
        });
        return of<number>(Count);
    }

    get LastUpdated$(): Observable<string> {
        return of<string>(`${this.LastUpdated_.toLocaleDateString()} @ ${this.LastUpdated_.toLocaleTimeString()}`);
    }

    public Initialize(BaseURL: string): void {
        this.Source$ = this.Http_.get<Array<LIB_Alert_ResponseDTO>>(`${BaseURL}/alerts`, { observe: 'response' }).subscribe( data => {
            this.Data$_.next(data.body as Array<LIB_Alert_ResponseDTO>);
        });
    }

    public ngOnDestroy() {
        this.Source$.unsubscribe();
    }
}

Answer 1

根据文档，计数 function：

计算源上的排放数量并在源完成时发出该数量

这意味着它计算可观察对象发出的次数而不是发出的记录数......

当有 10 个警报时，我会假设计数在开始时为 1（随着时间的推移会更多），这是正确的。

要解决此问题，您需要改用 map。 这样的事情应该有效：

  return this.Alerts$.pipe(map(alerts => alerts.length)); 

Answer 2

计数在蒸汽完成之前不会发出，您正在寻找的运算符是扫描，它就像一个减少的，每次源 stream 发出一个值时发出累加器。

this.Alerts$.pipe(scan((total, _) => total + 1, 0);

每次 Alerts$ 发出一个值时，累加器都会递增，然后发出累加器。

如果您无法理解正在发生的事情，请阅读 reduce 如何在 arrays 上工作以了解这个概念。

 const numberOfItems = [1,2,3,4,5,6,7,8].reduce((count, _) => { console.log(`Accumulator is: ${count + 1}`); return count + 1; }, 0); console.log('Final result: ' + numberOfItems);

然后用一个行为主题

 const { BehaviorSubject, scan } = rxjs; const bs$ = new BehaviorSubject(); bs$.pipe(scan((total, _) => total + 1, 0)).subscribe(count => { console.log(count); }); for (let i = 0; i <= 10; i++) { bs$.next(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.0/rxjs.umd.min.js" integrity="sha512-v0/YVjBcbjLN6scjmmJN+h86koeB7JhY4/2YeyA5l+rTdtKLv0VbDBNJ32rxJpsaW1QGMd1Z16lsLOSGI38Rbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>