Javascript RxJS方法有助于减少Angular应用程序中页面上的数据多次移动？

我正在我的Angular 2应用程序中使用可观测值。在这个特殊的例子中，我订阅了一些被过滤的数据（基于用户选择）。该功能正在发挥作用，但是，由于表格显示会移动几次，因此体验有点“不稳定”。另外，我注意到我在主过滤器函数调用中的console.log消息在控制台中重复了几次

所以，所有这些都是说，我想知道是否有一个RxJS方法，我可以添加，就在我订阅之前，减少过滤数据时屏幕移动的次数。这就是我的代码的样子：

private processType(name: string, value: any, body)
{
    if (this.body[name] && !value) {
            delete this.body[name];
        } else {
            this.body[name] = { $in: value };
        }
}

private onFilterReceived(value: any, type: string, body, pn_lang_e, pn_lang_s, pn_disc_e, pn_disc_s)
{
    if (type === 'lan')
    {
        this.processType('languages.primary', value, body);
    } if (type === 'dis')
    {
        this.processType('services.service', value, body);
    } 
    console.log('filters triggering...');
    this.dataService.getBySelections(
        this.page - 1, this.pagesize, this.body, this.sort, this.pn_lang_e, this.pn_lang_s, this.pn_disc_e, this.pn_disc_s)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            console.log('filter call arriving...');
            this.data = resRecordsData.data;
            if (this.filter === undefined)
            {
                this.data = resRecordsData.data;
            } else
            this.data.sort(this.filter);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);

    console.log(this.router.url);
}

顺便说一下，我看到控制台中多次触发的console.log如下：

console.log('filter call arriving...');

有关详细信息，当用户选择筛选器和/或加载组件时，将触发onFilterReceived（）。getBySelection（）是对MongoDB/节点后端的API调用。我们正在利用Mongo/Mongoose特性，在该特性中，我们可以将过滤器值作为键/值对传递到API调用的主体中

这看起来像是一种行为，可以通过添加RxJS链式方法来帮助实现吗？或者这种行为（特别是数据多次移动和上述console.log语句的多次触发）与此无关？只是想进一步了解RxJs，看看它在这种情况下是否有帮助

更新：根据一位评论者的建议，我在DataServiceAPI调用之前添加了一个console.log语句（并在这里更新了我的代码），并且可以确认多次触发，即使在初始组件加载时也是如此。其他信息：我正在初始化各种过滤器，以便用户可以使用它们

更新2:Re：另一个评论/问题，Mongoose特性的工作方式，我在请求主体中为每个过滤器元素传递一个数组。这和什么原因有关吗？下面是一个传递数组的例子，和语言有关。这基本上是说，当应用于“language.primary”属性时，给我所有匹配这三个数组值的结果

$in:["English", "Spanish", "Mandarin"]

我可以在我的Chrome网络选项卡中看到，此特定过滤器元件的实际网络调用如下：

languages.primary:{$in: ["English", "Spanish", "Mandarin"]}

同样，每个滤芯的有效载荷中都会有一个。每次打电话都会出去

更新3：

在初始组件加载时，我看到大约有25个网络请求发出。最后一个请求的有效负载如下所示（数组包含数据，因为在初始加载时，我传递每个筛选器的所有可能值——用户可以从中选择编辑传递的这些值）：

更新4：为了在这里提供我的筛选上下文，请参阅我刚刚发布的相关问题：

---

何时以及如何触发

onFilterReceived（）

？

getBySelection（）

是否从远程服务器获取数据？当用户选择筛选器和/或加载组件时，会触发onFilterReceived（）。是的，getBySelection（）是对MongoDB/节点后端的API调用。我们正在利用Mongo/Mongoose特性，在这里我们可以在API调用的主体中以键/值对的形式传递筛选器值。

console.log（）

是否在每次执行

onFilterReceived（）

时被多次触发？或者每次执行一次？它似乎是每次执行的多次。您是否可以在FilterReceived函数中放置一个console.log，以检查是否调用了多次？还可以添加this.dataService.getBySelections的实现，在进行API调用时可能多次发送结果。

onFilterReceived（）

何时以及如何触发？

getBySelection（）

是否从远程服务器获取数据？当用户选择筛选器和/或加载组件时，会触发onFilterReceived（）。是的，getBySelection（）是对MongoDB/节点后端的API调用。我们正在利用Mongo/Mongoose特性，在这里我们可以在API调用的主体中以键/值对的形式传递筛选器值。

console.log（）

是否在每次执行

onFilterReceived（）

时被多次触发？或者每次执行一次？它似乎是每次执行的多次。您是否可以在FilterReceived函数中放置一个console.log，以检查是否调用了多次？还可以添加this.dataService.getBySelections的实现，在进行API调用时可能多次发送结果。

languages.primary : {$in: ["English", "Spanish", "Mandarin"]} 
services.service : {$in: ["service1", "service2", "service3"]} 
services.flags.action : {$in: ["flag1", "flag2", "flag3",…]}