我们如何覆盖angular2-query-builder中的getInputType函数

Question

我在我的项目中使用了angular2-query-builder的角度材料代码，我面临着一个问题，我必须根据从上一个屏幕中选择的内容动态地更改config.field。当我更改字段时，我可以看到新的字段，但是，浏览器控制台抛出以下错误：

    QueryBuilderComponent.html:109 ERROR Error: No configuration for field 'Customer Name' could be found! Please add it to config.fields.
    at QueryBuilderComponent.push../node_modules/angular2-query-builder/dist/components/query-builder/query-builder.component.js.QueryBuilderComponent.getInputType (query-builder.component.js:228)
    at QueryBuilderComponent.push../node_modules/angular2-query-builder/dist/components/query-builder/query-builder.component.js.QueryBuilderComponent.findTemplateForRule (query-builder.component.js:165)
    at Object.eval [as updateDirectives] (QueryBuilderComponent.html:124)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655)
    at checkAndUpdateView (core.js:10452)
    at callViewAction (core.js:10692)
    at execEmbeddedViewsAction (core.js:10655) 

在调试时，它来自QueryBuilderComponent.getInputType我想绕过这个条件，如果找不到字段，则返回null：

QueryBuilderComponent.prototype.getInputType = function (field, operator) {
        if (this.config.getInputType) {
            return this.config.getInputType(field, operator);
        }
        if (!this.config.fields[field]) {
            return null; //MY CODE
            // throw new Error("No configuration for field '" + field + "' could be found! Please add it to config.fields."); // EXISTING CODE
        }
        var type = this.config.fields[field].type;
        switch (operator) {
            case 'is null':
            case 'is not null':
                return null; // No displayed component
            case 'in':
            case 'not in':
                return type === 'category' || type === 'boolean' ? 'multiselect' : type;
            default:
                return type;
        }
    };

我不能在node_modules的QueryBuilderComponent.js文件中更改它。如何覆盖或自定义此"getInputType“函数。

Answer 1

实际上，我自己找到了答案。只需在ngOnInit()中添加所需的更改代码

ngOnInit() {

QueryBuilderComponent.prototype.getInputType = function (field, operator) {
        if (this.config.getInputType) {
            return this.config.getInputType(field, operator);
        }
        if (!this.config.fields[field]) {
            return null; //MY CODE
            // throw new Error("No configuration for field '" + field + "' could be found! Please add it to config.fields."); // EXISTING CODE
        }
        var type = this.config.fields[field].type;
        switch (operator) {
            case 'is null':
            case 'is not null':
                return null; // No displayed component
            case 'in':
            case 'not in':
                return type === 'category' || type === 'boolean' ? 'multiselect' : type;
            default:
                return type;
        }
    };
}

因为它是一个原型，所以它将覆盖更改