如何在Angular中使用Jquery Query Builder

Question

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

首先，我尝试过使用插件laplasianin/angular-jqueryQueryBuilder，但我错过了如何实际将其导入到组件中的说明。我非常喜欢angular/typingcript。

然后，我已经试过了我自己通过安装建设者包： npm install jQuery-QueryBuilder

我已经把它添加到我的组件，就像jQuery的。 这是导致示例代码的基础上，following demo：

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 install jquery --save
• NPM安装jQuery的QueryBuilder的--save

不幸的是，你不会有任何自动完成，但它的工作原理。