实现具有角度2的查询构建器时未定义的“模板”

Question

我正在尝试使用angular 2应用程序实现查询构建器。所以我将jQuery与我的角度应用程序集成，之后，我的浏览器出现以下错误：

error_handler.js:46 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'template' of undefined
TypeError: Cannot read property 'template' of undefined
    at QueryBuilder.<anonymous> (http://localhost:8000/7.chunk.js:427:38)
    at Array.forEach (native)
    at new QueryBuilder (http://localhost:8000/7.chunk.js:422:33)
    at jQuery.fn.init.$.fn.queryBuilder (http://localhost:8000/7.chunk.js:3946:35)
    at QueryBuilder._queryBuilder (http://localhost:8000/7.chunk.js:6283:23)
    at QueryBuilder.ngOnInit (http://localhost:8000/7.chunk.js:6355:14)
    at _View_QueryBuilder_Host0.detectChangesInternal (QueryBuilder_Host.ngfactory.js:29:81)
    at _View_QueryBuilder_Host0.AppView.detectChanges (http://localhost:8000/vendor.bundle.js:32990:14)
    at _View_QueryBuilder_Host0.DebugAppView.detectChanges (http://localhost:8000/vendor.bundle.js:33095:44)
    at ViewRef_.detectChanges (http://localhost:8000/vendor.bundle.js:33481:20)
    at RouterOutlet.activate (http://localhost:8000/vendor.bundle.js:50707:42)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:8000/vendor.bundle.js:51924:16)
    at ActivateRoutes.activateRoutes (http://localhost:8000/vendor.bundle.js:51902:22)
    at http://localhost:8000/vendor.bundle.js:51864:19
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:8000/vendor.bundle.js:51863:29)
    at ActivateRoutes.activateRoutes (http://localhost:8000/vendor.bundle.js:51903:22)
    at http://localhost:8000/vendor.bundle.js:51864:19
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:8000/vendor.bundle.js:51863:29)
    at ActivateRoutes.activateRoutes (http://localhost:8000/vendor.bundle.js:51907:22)
    at http://localhost:8000/vendor.bundle.js:51864:19
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:8000/vendor.bundle.js:51863:29)
    at ActivateRoutes.activateRoutes (http://localhost:8000/vendor.bundle.js:51903:22)
    at http://localhost:8000/vendor.bundle.js:51864:19
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:8000/vendor.bundle.js:51863:29)
    at ActivateRoutes.activate (http://localhost:8000/vendor.bundle.js:51858:14)
    at http://localhost:8000/vendor.bundle.js:51599:56

并在我的控制台终端编译错误。

[default] /home/rahul/Documents/codebase/dcn_web/src/app/pages/reports/component/queryBuilder/queryBuilder.component.ts:65:19 
    Property 'queryBuilder' does not exist on type 'JQuery'.
[default] Checking finished with 1 errors

我对jQuery知之甚少。所以帮帮我吧。 感谢。

html文件

<ba-card>
  <div id="builder"></div>
</ba-card>

component.ts

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';

import {ReportMock} from '../../report.mock';

import 'jQuery-QueryBuilder/dist/js/query-builder.standalone.js';
import 'jQuery-QueryBuilder/dist/css/query-builder.default.css';

@Component({
  selector: 'query-builder',
  template: require('./queryBuilder.html'),
  styles: [require('./queryBuilder.scss')],
})

export class QueryBuilder extends OnInit {

  rules_basic: any = {};

  constructor(private _elRef: ElementRef,
              private _fb: FormBuilder) {
    super();
  }



  private _queryBuilder(initilal_rules: any) {

    $('#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: initilal_rules
    });

  }

  ngOnInit() {
    let $ = jQuery;
    this.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
        }]
      }]
    };

    this._queryBuilder(this.rules_basic);
  }