如何在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

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