0

我在我的项目中使用 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”函数。

4

1 回答 1

0

实际上，我自己找到了答案。只需在 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;
        }
    };
}

由于它是原型，它将覆盖更改

于 2020-09-17T05:44:03.223 回答