如何在 Angular 中使用 Jquery Query Builder

Question

在我的 angular-cli 项目中寻找使用jQuery Query Builder的方法。

首先，我尝试使用插件laplasianin/angular-jqueryQueryBuilder，但我错过了有关如何将其实际导入到我的组件中的说明。我在角度/打字稿方面非常新手。

然后我通过安装构建器包自己尝试了它： npm install jQuery-QueryBuilder

我已经将它添加到我的组件中，就像 jQuery 一样。这是基于以下演示的结果示例代码：

import {AfterViewInit, Component} from "@angular/core";
import * as jQuery from "jquery";
import "jQuery-QueryBuilder/dist/js/query-builder.standalone.js";
import "jQuery-QueryBuilder/dist/css/query-builder.default.css";

@Component({
    selector: 'app-query-builder',
    templateUrl: './query-builder.component.html',
    styleUrls: ['./query-builder.component.scss']
})
export class QueryBuilderComponent implements AfterViewInit{
    protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'price',
            operator: 'less',
            value: 10.25
        }, {
            condition: 'OR',
            rules: [{
                id: 'category',
                operator: 'equal',
                value: 2
            }, {
                id: 'category',
                operator: 'equal',
                value: 1
            }]
        }]
    };

    ngAfterViewInit() {
        this.getQueryBuilder();
    }


    private getQueryBuilder() {
        // jQuery('#builder').html('appelsap');
        let queryBuilder = jQuery.fn.queryBuilder;
        jQuery('#builder').queryBuilder({
            plugins: ['bt-tooltip-errors'],

            filters: [{
                id: 'name',
                label: 'Name',
                type: 'string'
            }, {
                id: 'category',
                label: 'Category',
                type: 'integer',
                input: 'select',
                values: {
                    1: 'Books',
                    2: 'Movies',
                    3: 'Music',
                    4: 'Tools',
                    5: 'Goodies',
                    6: 'Clothes'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
            }, {
                id: 'in_stock',
                label: 'In stock',
                type: 'integer',
                input: 'radio',
                values: {
                    1: 'Yes',
                    0: 'No'
                },
                operators: ['equal']
            }, {
                id: 'price',
                label: 'Price',
                type: 'double',
                validation: {
                    min: 0,
                    step: 0.01
                }
            }, {
                id: 'id',
                label: 'Identifier',
                type: 'string',
                placeholder: '____-____-____',
                operators: ['equal', 'not_equal'],
                validation: {
                    format: /^.{4}-.{4}-.{4}$/
                }
            }],

            rules: this.rules_basic
        });
    }
}

在这种情况下，应用程序编译并加载，但我收到以下错误返回 Cannot read property 'template' of undefined。

我不知道如何让这些工作正常进行。真的很想在这方面提供一些帮助。谢谢你。

======== 编辑如所问，这是完整的错误：

ERROR TypeError: Cannot read property 'template' of undefined
    at QueryBuilder.<anonymous> (query-builder.standalone.js:415)
    at Array.forEach (<anonymous>)
    at new QueryBuilder (query-builder.standalone.js:410)
    at jQuery.fn.init.$.fn.queryBuilder (query-builder.standalone.js:3934)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/components/application/query-builder/query-builder.component.ts.QueryBuilderComponent.getQueryBuilder (query-builder.component.ts:40)
    at QueryBuilderComponent.webpackJsonp.../../../../../src/app/components/application/query-builder/query-builder.component.ts.QueryBuilderComponent.ngAfterViewInit (query-builder.component.ts:33)
    at callProviderLifecycles (core.es5.js:11269)
    at callElementProvidersLifecycles (core.es5.js:11244)
    at callLifecycleHooksChildrenFirst (core.es5.js:11228)
    at checkAndUpdateView (core.es5.js:12325)

======== 编辑更新了代码以反映当前的使用情况。

Answer 1

首先，laplasianin/angular-jqueryQueryBuilder 是一个 AngularJs (1) 库。

其次，如果您在 anglar-cli.json 中设置此行，您将能够使其正常工作：

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"        
  ],

您的组件：

import { Component, AfterViewInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

 protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'price',
            operator: 'less',
            value: 10.25
        }, {
            condition: 'OR',
            rules: [{
                id: 'category',
                operator: 'equal',
                value: 2
            }, {
                id: 'category',
                operator: 'equal',
                value: 1
            }]
        }]
    };

    ngAfterViewInit() {
        this.getQueryBuilder();
    }

    private getQueryBuilder() {
        $('#builder').queryBuilder({
            plugins: ['bt-tooltip-errors'],

            filters: [{
                id: 'name',
                label: 'Name',
                type: 'string'
            }, {
                id: 'category',
                label: 'Category',
                type: 'integer',
                input: 'select',
                values: {
                    1: 'Books',
                    2: 'Movies',
                    3: 'Music',
                    4: 'Tools',
                    5: 'Goodies',
                    6: 'Clothes'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
            }, {
                id: 'in_stock',
                label: 'In stock',
                type: 'integer',
                input: 'radio',
                values: {
                    1: 'Yes',
                    0: 'No'
                },
                operators: ['equal']
            }, {
                id: 'price',
                label: 'Price',
                type: 'double',
                validation: {
                    min: 0,
                    step: 0.01
                }
            }, {
                id: 'id',
                label: 'Identifier',
                type: 'string',
                placeholder: '____-____-____',
                operators: ['equal', 'not_equal'],
                validation: {
                    format: /^.{4}-.{4}-.{4}$/
                }
            }],

            rules: this.rules_basic
        });
    }

}

不要忘记：

• npm install bootstrap --save
• npm 安装 jquery --save
• npm install jQuery-QueryBuilder --save

不幸的是，您不会有任何自动完成功能，但它可以工作。