Javascript 在Angular App中，过滤数据不一致的竞赛条件存在故障？

我的情况是，在我们的Angular前端MongoDB/Node后端应用程序中，我为用户提供了一个过滤从API返回的数据的选项。过滤器按预期运行，即当用户选择或输入各种基于UI的过滤器（例如，邮政编码、语言等）时，数据会进行适当过滤

此外，过滤器选择保存在URL中，以便用户可以返回到组件，甚至跟踪URL，并且通过加载该URL，将应用所有以前的过滤器选择。在某种程度上，这也和预期的一样有效

我还有一个pageChange（）函数，每当用户移动到另一个分页迭代时，该函数就会触发。函数的作用是：查看URL，确保在用户对结果进行分页时继续应用过滤器。pageChange（）函数可以正常工作

我遇到的问题，也是我试图解释的问题是，如果用户导航离开某个页面/组件，然后返回到该页面/组件，那么有时候（可能是二十次中的一次），数据会过滤，然后取消过滤--就在屏幕上，当用户返回页面并重新装载该组件时。因此，用户最终得到的是未根据URL中显示的过滤器进行过滤的数据，这些数据仍应通过过滤器输入。所以，看起来，大概二十分之一的时间，我遇到的是比赛条件的后果

为了进一步澄清，过滤器选择从二级过滤器组件传递到组件。我使用Angular的

Output（）

和

EventEmitter（）

来实现这一点

我的组件中的代码如下所示：

import { Observable } from 'rxjs/Rx';
import { FiltersService } from '../../../../data/filters.service';
import { Http } from '@angular/http';
import { API } from './../../../../data/api.service';
import { Component, EventEmitter, Output } from '@angular/core';
import { TabPage } from '../../../../ui/tab-navigation/tab-page';
import { Router, ActivatedRoute } from '@angular/router';
import { TableDisplayComponent } from './../../table-display/table-display.component';

@Component({
  templateUrl: './clients.html'
})
export class ClientsComponent extends TabPage
{
    private section: string;
    records = {};
    data;
    errorMsg: string = 'Server Error';
    page: number = 0;
    pagesize = 12;
    currentStage: string = 'clients';

  ...

    constructor(private FiltersService: filtersService,
                private router: Router,
                private route: ActivatedRoute)
    {
        super();

        this._title = 'Clients';
        this.contentId = 'clients-page';
    }

    body: any = { $or: [ { "group-a" : "clients" },
                         { "group-b" : "clients" },
                                                  ] };

    private processType(body, propName: string, value: any)
    {
        this.filtersService.processType(body, propName, value);
    }

    private onFilterReceived(value: any, type: string, page)
    {
        this.filtersService.onFilterReceived(this.body, value, type);

        this.route.params.subscribe(
            (params: any) => {
                page = params['page'];
            }
        );

        let fn = resRecordsData => {
            this.records = resRecordsData;
            let data = resRecordsData.data;
            console.log(data);
        };

        this.filtersService.getByFilter(page - 1, this.pagesize, this.body, fn);
    }

    public pageChange(page, value, type, body)
    {
        this.route.params.subscribe(
            (params: any) => {
                this.page = params['page'];
                this.pn_lang_e = params['pn_lang_e'];
                this.pn_lang_s = params['pn_lang_s'];
                this.pn_locations_e = params['pn_locations_e'];
                this.pn_locations_s = params['pn_locations_s'];
                this.pn_branches_e = params['branches_e'];
                this.pn_branches_s = params['branches_v'];
            }
        );

        this.router.navigate(
            ['/clients', {
                page: page,
                pn_lang_e: this.pn_lang_e,
                pn_lang_s: this.pn_lang_s,
                pn_locations_e: this.pn_locations_e,
                pn_locations_s: this.pn_locations_s,
                branches_e: this.pn_branches_e,
                branches_s: this.pn_branches_s
            }]);

        let fn = resRecordsData => {
            this.records = resRecordsData;
            let data = resRecordsData.data;
        };

        this.filtersService.getByFilter(page - 1, this.pagesize, this.body, fn);
    }

}

过滤器通过POST请求的主体传递。FiltersService（在上面的组件中使用）中的代码处理如下内容：

public getByFilter(page, pagesize, body, fn?: any)
{
    return this.apiService.post({req: this.strReq, reqArgs: {page: page, pagesize: pagesize}, reqBody: body, callback: fn});
}

public processType(body, propName: string, value: any)
{
    if (body[propName] && !value || body[propName] && value.length < 1) {
        delete body[propName];
    } else if (value) {
        body[propName] = { $in: value };
    }
}

public onFilterReceived(body, value: any, type: string)
{
    if (type === 'lan')
    {
        this.processType(body, 'languages.primary', value);
    } if (type === 'zip')
    {
        this.processType(body, 'addresses.postalCode', value);
    } if (type === 'branch')
    {
        this.processType(body, 'branch', value);
    }
}

publicGetByFilter（页面、页面大小、正文、fn？：任意）
{
返回this.apiService.post（{req:this.strReq，reqArgs:{page:page，pagesize:pagesize}，reqBody:body，callback:fn}）；
}
publicprocessType（body，propName:string，value:any）
{
if（body[propName]&&！value | | body[propName]&&value.length<1）{
删除正文[名称]；
}else if（值）{
body[propName]={$in:value}；
}
}
公共onFilterReceived（主体，值：任意，类型：字符串）
{
如果（类型=='lan'）
{
this.processType（主体，'languages.primary'，值）；
}如果（类型=='zip'）
{
this.processType（body，'addresses.postalCode'，value）；
}如果（类型==‘分支’）
{
this.processType（主体，'分支'，值）；
}
}

最后，它位于我在过滤器中使用的组件的视图中：

<div class="page-content">
    <table-display [records]="records"
        [currentStage]="currentStage"
        (sendLocation)="onFilterReceived($event, type = 'location')"
        (sendChange)="pageChange($event)"
        (sendZipcode)="onFilterReceived($event, type = 'zip')"
        (sendLanguage)="onFilterReceived($event, type = 'lan')"
        (sendBranch)="onFilterReceived($event, type = 'branch')">
    </table-display>
</div>

所以我要做的是确保我得到一致的结果，100%的时间。此外，即使数据确实正确解析，有时在解析为过滤数据之前，它会在过滤数据和未过滤数据之间进行视觉切换，这也会分散视觉注意力，显然不理想

当组件重新加载时，上述代码中有什么问题使得过滤器在二十次中有一次不应用？比赛条件有问题吗？或者是别的问题——也许是操作顺序？我能做些什么来解决这个问题

编辑：我突然想到，我可能可以解决这个问题的一种方法是，在组件首次加载时强制组件查看URL，以拾取过滤器选择（如果存在）。这就是pageChange（）函数启动时发生的情况，并且工作正常。所以每次加载组件时，我可能需要做类似的事情？那会是什么样子