Rxjs 用mergeMap分解和变换重建非完整可观测阵列

我有一个带有publishReplay和refcount的主题，所以它实际上永远不会完成。refcount的输出是一个可观察的对象数组。我想将可观测对象数组分解为发射的元素，根据需要进行变换，然后将它们合并回一个数组，但由于源是不完整的，数组边界在异步性质中“丢失”

例如，我使用mergeMap和scan来积累数据。但是，正如预期的那样，它会不断累积，因此生成的数组就是流的整个历史。扫描的初始值仅在流的开头初始化。我不能使用toArray，因为可观察的事物永远不会终止

我在异步硬件设计方面有很多经验。与此异步链类似的硬件是使用锁存器。我不确定RxJS中的概念等价物是什么。我假设从refcount获取发出的数组输出并将其应用于Observable.from（theArrayOutput）会起作用，但我不知道如何将其插入流链中

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

type IObjectsOperation = (types: Object[]) => Object[];

@Component({
    selector: 'app-events-test',
    templateUrl: './events-test.component.html',
    styleUrls: ['./events-test.component.css']
})

export class EventsTestComponent implements OnInit {
    public objects: Observable<Object[]>;
    public scanned: Observable<any>;
    protected updates: Subject<any> = new Subject<any>();
    protected functionStream: Subject<any> = new Subject<any>();
    protected addStream: Subject<Object> = new Subject<Object>();
    private initialObjects: Object[] = [1];

    constructor() {
        this.objects = this.updates
            .scan((objects: Object[],
                   operation: IObjectsOperation) => {
                    return operation(objects);
                },
                this.initialObjects)
            .publishReplay(1)
            .refCount();
        this.functionStream
            .map(function (message: Object): IObjectsOperation {
                return (messages: Object[]) => {
                    return messages.concat(message);
                };
            })
            .subscribe(this.updates);
        this.addStream.subscribe(this.functionStream);
        this.scanned = this.objects
            .mergeMap(val => val)
            // some transformation that I want to have happen, in this case no-op
            .filter(() => {return true})
            // attempt to rebuild array, but items are accumulated
            .scan( (acc: Array<any>, x: Object) => { return acc.concat(x); }, [])

    }


transform(objects) {
    return Observable.from(objects)
        // this withLatestFrom suggestion didn't work
        // .withLatestFrom( this.functionStream, ( val, fn ) => fn( val ) )
        .filter(() => {
            return true
        })
        .toArray()
}


    start(): void {
        console.log('---------STARTING');
        this.objects.mergeMap(obj => this.transform(obj))
        .subscribe(
            obj => console.log('objects: ' + obj)
        );
        this.scanned.subscribe(
            {
                next: obj => {
                    console.log('scanned: ' + obj);
                },
                error: () => {
                },
                complete: () => console.log('COMPLETED')
            }
        );
        this.add(2);
        this.add(3);
    }
    add(object: Object): void {
        this.addStream.next(object);
    }
    ngOnInit() {
        this.start();
    }

}

我想看到的是：

---------STARTING
events-test.component.ts:49 objects: 1,2
events-test.component.ts:52 scanned: 1,2
events-test.component.ts:49 objects: 1,2,3
events-test.component.ts:52 scanned: 1,2,3

我可以使用一些变通方法：

在整个流中将数据保持为数组

将源未完成的可观察项转换为完成的

我假设此体系结构的解决方案是：

我可以在流中插入一些操作，从可观察对象获取数组，并返回一个完成的可观察对象

有一些外部信号需要从源观测值发出，指示“正在处理”，然后终止限制扫描。我觉得这很笨拙

我假设RxJS中会有一些与异步硬件锁存器等价的东西，所以我希望保留当前的体系结构。此外，我认为RxJS真的很酷，我想在基于时间的流处理方面填补我的知识空白

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

type IObjectsOperation = (types: Object[]) => Object[];

@Component({
    selector: 'app-events-test',
    templateUrl: './events-test.component.html',
    styleUrls: ['./events-test.component.css']
})

export class EventsTestComponent implements OnInit {
    public objects: Observable<Object[]>;
    public scanned: Observable<any>;
    protected updates: Subject<any> = new Subject<any>();
    protected functionStream: Subject<any> = new Subject<any>();
    protected addStream: Subject<Object> = new Subject<Object>();
    private initialObjects: Object[] = [1];

    constructor() {
        this.objects = this.updates
            .scan((objects: Object[],
                   operation: IObjectsOperation) => {
                    return operation(objects);
                },
                this.initialObjects)
            .publishReplay(1)
            .refCount();
        this.functionStream
            .map(function (message: Object): IObjectsOperation {
                return (messages: Object[]) => {
                    return messages.concat(message);
                };
            })
            .subscribe(this.updates);
        this.addStream.subscribe(this.functionStream);
        this.scanned = this.objects
            .mergeMap(val => val)
            // some transformation that I want to have happen, in this case no-op
            .filter(() => {return true})
            // attempt to rebuild array, but items are accumulated
            .scan( (acc: Array<any>, x: Object) => { return acc.concat(x); }, [])

    }


transform(objects) {
    return Observable.from(objects)
        // this withLatestFrom suggestion didn't work
        // .withLatestFrom( this.functionStream, ( val, fn ) => fn( val ) )
        .filter(() => {
            return true
        })
        .toArray()
}


    start(): void {
        console.log('---------STARTING');
        this.objects.mergeMap(obj => this.transform(obj))
        .subscribe(
            obj => console.log('objects: ' + obj)
        );
        this.scanned.subscribe(
            {
                next: obj => {
                    console.log('scanned: ' + obj);
                },
                error: () => {
                },
                complete: () => console.log('COMPLETED')
            }
        );
        this.add(2);
        this.add(3);
    }
    add(object: Object): void {
        this.addStream.next(object);
    }
    ngOnInit() {
        this.start();
    }

}

---

编辑：@xtianjohns给出了一个很好的答案，说明了如何进行内部循环，但订阅仍然没有完成。建议添加withLatestFrom导致transform函数中断，在注释该行时，将渲染数组，但外部循环未完成。如果行存在，则阵列不会渲染，循环也不会完成。

您的问题在于使用

mergeMap

，然后使用

scan

，并在“外部”流上执行此操作，而不是转换对象列表，然后发送该列表

另一种方法：如果您想要的是一个数组流，那么让我们始终保持它是一个数组流

        /* Function that takes array and returns stream of transformed arrays */
        function transform( objects ) {
          return Observable.from( objects )
            /* We only need this because your transformation is wrapped in a stream. */
            .withLatestFrom( this.functionStream, ( val, fn ) => fn( val ) )
            // some transformation that I want to have happen, in this case no-op
            .filter(() => {return true});
            .toArray();
        }

        this.scanned = this.objects
          /* let's keep this as Observable<Array<YourObject>> */
          .mergeMap( transform );
          /* No need to "rebuild" array, this is now a stream of arrays */

获取数组并返回已转换数组流的函数*/ 函数变换（对象）{ 返回可观察到的。来自（对象） /*我们之所以需要它，是因为您的转换被包装在一个流中*/ .withLatestFrom（this.functionStream，（val，fn）=>fn（val）） //我希望发生的一些转变，在这种情况下，没有op .filter（（）=>{return true}）； .toArray（）； } this.scanned=this.objects /*让我们将其保持为可观察状态*/ .合并地图（转换）； /*无需“重建”阵列，这是一个阵列流*/ 请注意，在本例中，我如何在

transform

中“转换”数组的元素，而不是尝试在流中“展开”数组，然后重新组合

这是否适合您的用例

---

编辑：我在读取您的functionStream签名时出错，已更正此错误。

问题在于转换（过滤器）发生在单个发射的元素上。当涉及到过滤器（我的转换）时，我仍然有同样的问题，它们必须在每个项目上发生。考虑主流中的获取链接，然后为每个项目搜索另一个可观察到的链接项目。虽然这很酷，但我可能因为包含functionStream而误导了你一点。这实际上只是从addStream加载主题的一种方法，其他什么都没有。我不太确定转换函数是如何工作的，我会继续工作，然后再给你回复。没问题，如果你只需要在每个项目上运行过滤器，那么我们也可以在转换函数中移动它。您只需在“transform”函数中移动单个元素上的所有转换或验证，您可以随意命名或重构该函数。这篇文章现在已经被编辑了。这几乎是有效的，只是没有完成。我在代码中编辑了订阅以查找完整的订阅，并添加了编辑注释以指示问题。我们已经创建了一个完成的内部循环，但是无法在订阅中完成完成的内部循环。这是正确的，在我的示例中，流在其源代码完成之前不会完成（源代码是

this.updates

）。终止该流将终止下游的一切。