javascript - Angular 2 应用程序转移到服务层后逻辑无法正常工作

标签 javascript angular typescript

我的 Angular 2 应用程序中有一些功能,我想将其移动到服务层,因为当前有几个组件使用完全相同的功能(因此代码是重复的)。然而,到目前为止,当我将其移动到服务层时,我无法让该功能正常工作。当直接从组件层调用时,它确实可以正常工作。

首先,这是我的组件中的功能。基本上,我接受用户所做的一些过滤器选择,然后根据这些过滤器选择过滤我的可观察调用:

body: any = {'group': 'consulting'};

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

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

        this.filtersService.getByFilter(this.page, this.pagesize, this.body, this.sort)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
            if (this.filter === undefined)
            {
                this.data = resRecordsData.data;
            } else
            this.data.sort(this.filter);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }

以上所有内容都按预期工作。

但是,正如前面提到的,我想将此逻辑的初始部分移至服务层,然后将其结果传递到组件中的订阅中。所以我尝试过(目前不起作用)是这样的:

在服务层我有这个:

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

public getFilterInput(value, type, body)
{
    if (type === 'lan')
    {
        return this.processType('languages.primary', value, body);
    } if (type === 'zip')
    {
        return this.processType('addresses.zipCode', value, body);
    } 

}

请注意,我在这里返回值,因为根据我的理解,这是我在抽象到服务层时需要做的事情。

那么在我重构的组件中:

body: any = {'group': 'consulting'};

private processType(name, value, body)
{
    this.filtersService.processType(name, value, body);
}

private onFilterReceived(value: any, type: string, sort?)
{
    this.filtersService.getFilterInput(type, value);

    this.filtersService.getByFilter(this.page, this.pagesize, this.body, this.sort)
    .subscribe(resRecordsData => {
        this.records = resRecordsData;
        this.data = resRecordsData.data;
        if (this.filter === undefined)
        {
            this.data = resRecordsData.data;
        } else
        this.data.sort(this.filter);
    },
    responseRecordsError => this.errorMsg = responseRecordsError);
}

目前我在控制台中收到此错误:

inline template:2:8 caused by: Cannot read property 'languages.primary' of undefined

我在这里缺少什么?当将此逻辑移至服务层时,我需要如何以不同的方式处理此问题?

编辑:对我的代码(如上所示)进行编辑以传递“body”。然而,仍然出现未定义的错误。

最佳答案

this.body[name] 正文在服务中不可用,这就是 langauges.primary 未定义的原因,您需要将正文传递给服务

更新

public processType(name: string, value: any, body: any)
{
    let body = body;
    if (body[name] && !value) {
            return delete body[name];
        } else {
            return body[name] = { $in: value };
        }
}

然后在组件中,这样:

private processType(name, value)
{
    let body = {'group': 'consulting'};
    this.filtersService.processType(name, value, body);
}

关于javascript - Angular 2 应用程序转移到服务层后逻辑无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45790148/

相关文章:

angular - 单元测试将类动态添加到 HTML 按钮 Jasmine

typescript - 打字 : SyntaxError: Unexpected token =>

javascript - 使用 parseInt 转换单选按钮会返回一个字符串

visual-studio - 在 Visual Studio 2017 中隐藏来自 tsx 文件的派生 .js 和 .js.map

javascript - 单击另一个元素时取消选择元素

javascript - Angular JS http 获取基本身份验证

javascript - 在纯 JavaScript 中,如何加载两个 JSON 文件并将它们作为命名变量传递?

javascript - 如果通过 js 更改值,则不会触发 .change

angular - 从 Angular 项目中卸载包

Angular/弹性布局不适用于 Angular 9