javascript - 如何在 Angular 中使用 Jquery Query Builder
正在寻找一种在我的 angular-cli 项目中使用 jQuery 查询构建器的方法。
首先我尝试使用插件 laplasianin/angular-jqueryQueryBuilder，但我找不到如何将其实际导入到我的组件中的说明。我对 Angular/TypeScript 非常陌生。
然后我尝试自己安装构建器包：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
});
}
}
在这种情况下，应用程序可以编译和加载，但我收到以下错误返回 无法读取未定义的属性 'template'。
我完全不知道如何使这些工作。真的很想得到一些帮助。谢谢你。
======= 编辑 根据要求，这是完整的错误信息：
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)
======= 编辑 已更新代码以反映当前用法。
答案＃1
首先，laplasianin/angular-jqueryQueryBuilder 是一个 AngularJs (1) 库。
其次，如果你在你的 angular-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 安装 bootstrap --save
- npm 安装 jquery --save
- npm 安装 jQuery-QueryBuilder --save
不幸的是，你将无法使用自动完成功能，但它可以正常工作。