Verwendung von Jquery Query Builder in Angular

Question

Suchen Sie nach einer Möglichkeit, die jQuery Query Builder in meinem eckigen-Cli-Projekt zu verwenden.

Zuerst habe ich versucht, mit dem Plugin laplasianin/angular-jqueryQueryBuilder, aber ich vermisse Anweisungen, wie Sie dies tatsächlich in meine Komponente importieren. Ich bin sehr Anfänger in eckigen/Schreibmaschine.

Dann habe ich versucht habe es auf meinem eigenen durch den Generator-Paket installieren: npm install jQuery-QueryBuilder

ich es zu meiner Komponente hinzugefügt haben, wie jQuery. Dies ist der resultierende Beispielcode, basierend auf den 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 
     }); 
    } 
} 

In diesem Fall wird die App kompiliert und Lasten, aber ich bekomme die folgende Fehlermeldung im Gegenzug Cannot read property 'template' of undefined.

Ich habe keine Ahnung, wie dies funktioniert. Würde mir wirklich etwas Hilfe dabei wünschen. Vielen Dank.

======= EDIT Als gefragt, dann ist dies der vollständige Fehler:

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) 

======= EDIT den Code aktualisiert die aktuelle Nutzung zu reflektieren.

Answer 1

Erstens ist Laplasianin/angular-jqueryQueryBuilder eine AngularJs (1) -Bibliothek.

Zweitens, wenn Sie diese Zeilen in Ihrer Änglar-cli.json gesetzt werden Sie in der Lage sein, es zu machen funktioniert:

"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"   
    ], 

Ihre Komponente:

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 
     }); 
    } 

} 

Nicht vergessen:

• npm Bootstrap --save
• npm installieren installieren jquery --save
• npm jQuery-Querybuilder --save
installieren

Leider werden Sie jede Auto-Vervollständigung nicht haben, aber es funktioniert.