运行处理多个项目后，RxJS 中的单个运算符

Question

我对 RxJs 比较陌生，在处理了使用 switchMap 运算符发出的多个项目后，我无法链接单个操作。

场景：使用后端数据为下拉列表生成一个对象数组，然后链接一个操作来设置下拉列表的选定值。

这是帮助说明问题的无效代码。

this.sub = this.dataService.getUserData()
    .switchMap((data) => Observable.from(data)) // create new data stream from inner data set
    .map((data: any) => {
        return { value: data._id, viewValue: data.firstName + ' ' + data.lastName };
    }) // create data structure for drop down
    .subscribe( (data) => {
        this.userDropDown.push(data); // this operation needs to run once per item emitted, and is working
        this.patchFormData(); // <-- However, this only needs to run once
    },
    (error) => console.log("error", error)
    );

我已经尝试了各种改变问题的运算符，但无法解决整个问题，即 a) 根据源数据获取新的对象数组和 b) 运行完成后的单个操作.

非常感谢任何帮助。

谢谢，

小号。阿罗拉

-- 更新：工作的最终版本是基于下面的答案并进行了较小的语法修复：

this.sub = this.dataService.getUserData()
    .map((data: any[]) => {
        return data.map((x: any) => {
            return { value: x._id, viewValue: x.firstName + ' ' + x.lastName };
        });
    })
    .subscribe((data: any) => {
        this.userDropDown = data;
        this.patchFormData();
    },
    (error) => console.log("error", error)
    );

Answer 1

实际上，您根本不需要 .switchMap()。您只是使用 Observable.from() 创建多个发射，除非您真的想一个一个地更新下拉值，否则这是完全没有必要的。

您可以做的只是返回数组，使用 .map() 转换数组，然后将其分配给您的下拉值列表。

this.sub = this.dataService.getUserData()
//this map is a function of Observable
    .map((data: any[]) => {
        //this map is a function of array, not observable.
        //use this to transform the data
        return data.map(x => ({value: x._id, viewValue: x.firstName + ' ' + x.lastName}))
    })
    .subscribe((data) => {
            //assign your values to your dropdown list, and not pushing it one by one.
            this.userDropDown = data;
            this.patchFormData();
        },
        (error) => console.log("error", error)
    );

现在，您的 Observable 中只有一个发射（即 api 调用），然后在您的 .subscribe() 函数中，您的 this.userDropDown 和 this.patchFormData()两者都只会运行一次。

运行处理多个项目后，RxJS 中的单个运算符

run single operation in RxJS after mutliple items are processed

javascript

arrays

rxjs

rxjs5

运行 处理多个项目后，RxJS 中的单个运算符

run single operation in RxJS after mutliple items are processed

javascript

arrays

rxjs

rxjs5

运行处理多个项目后，RxJS 中的单个运算符