- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
在这里,我试图根据 Angular2-query-builder 中的字段值更改运算符。我的 TS 文件。
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<query-builder [(ngModel)]='uiExpression' [config]='config' (ngModelChange)="apply()" #que (onChangeCallback)="onchange()">
<ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
<button mat-button (click)="addRule()">+ Rule</button>
<button mat-button (click)="addRuleSet()">+ Ruleset</button>
<button mat-button (click)="removeRuleSet()">- Ruleset</button>
</ng-container>
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<button mat-icon-button color="accent" (click)="removeRule(rule)">
<mat-icon>remove</mat-icon>
</button>
</ng-container>
<ng-container *querySwitchGroup="let ruleset">
<mat-radio-group *ngIf="ruleset" [(ngModel)]="ruleset.condition">
<mat-radio-button value="and">And</mat-radio-button>
<mat-radio-button value="or">Or</mat-radio-button>
</mat-radio-group>
</ng-container>
<ng-container *queryInput="let rule; type: 'string'">
<mat-form-field>
<input matInput [(ngModel)]="rule.value">
</mat-form-field>
</ng-container>
<ng-container *queryInput="let rule; type: 'number'">
<mat-form-field>
<input matInput type="number" [(ngModel)]="rule.value">
</mat-form-field>
</ng-container>
<ng-container *queryInput="let rule; type: 'date'">
<mat-form-field>
<input matInput [matDatepicker]="picker" [(ngModel)]="rule.value">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<ng-container *queryInput="let rule; let field=field; let options=options; type: 'multiselect'">
<mat-form-field>
<mat-select multiple [(ngModel)]="rule.value">
<mat-option *ngFor="let opt of options" [value]="opt.value">
{{ opt.name }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *queryField="let rule; let fields=fields; let changeField=changeField">
<mat-form-field>
<mat-select [(ngModel)]="rule.field" (ngModelChange)="changeFields($event, rule)">
<mat-option *ngFor="let field of fields" [value]="field.value">{{field.name}}</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *queryOperator="let rule; let operators=operators">
<mat-form-field>
<mat-select [(ngModel)]="rule.operator" (ngModelChange)="changeOperator(rule)">
<mat-option *ngFor="let value of operators" [value]="value">{{value}}</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</query-builder>
<div>{{userExpression}}</div>
`,
})
export class App {
public operators = [
{
"attributeType": "STRING",
"operators": [
{ "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
{ "displayOperator": "Does not Equal", "sqlOperator": "<>(VALUE)" },
{ "displayOperator": "Starts With", "sqlOperator": "LIKE %(VALUE)" },
{ "displayOperator": "Ends With", "sqlOperator": "LIKE (VALUE)%" },
{ "displayOperator": "Contains", "sqlOperator": "LIKE %(VALUE)%" },
{ "displayOperator": "Does Not Contain", "sqlOperator": "NOT LIKE %(VALUE)" },
{ "displayOperator": "Does Not Start With", "sqlOperator": "NOT LIKE (VALUE)%" },
{ "displayOperator": "Does Not End With", "sqlOperator": "NOT LIKE %(VALUE)%" }
]
},
{
"attributeType": "Numeric",
"operators": [
{ "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
{ "displayOperator": "Does not Equal", "sqlOperator": "<>(VALUE)" },
{ "displayOperator": "Greater", "sqlOperator": ">(VALUE)" },
{ "displayOperator": "Equal or Greater", "sqlOperator": ">=(VALUE)" },
{ "displayOperator": "Less", "sqlOperator": "<(VALUE)" },
{ "displayOperator": "Equal or Less", "sqlOperator": "<=(VALUE)" },
{ "displayOperator": "Within", "sqlOperator": "BETWEEN (VALUE1) AND (VALUE2)" },
]
},
{
"attributeType": "Date",
"operators": [
{ "displayOperator": "Equals", "sqlOperator": " =(VALUE)" },
{ "displayOperator": "On or After", "sqlOperator": ">=(VALUE)" },
{ "displayOperator": "Before", "sqlOperator": "<(VALUE)" },
{ "displayOperator": "Between", "sqlOperator": "BETWEEN (VALUE1) AND (VALUE2)" }
]
}
]
AttributeDummy: any[] = [
{
"userColumnName": "Attribute 1",
"colType": "multiselect",
"isListType": "Y",
"userColumnOptions": [
{ name: "Male", value: "m" },
{ name: "Female", value: "f" }
]
},
{
"userColumnName": "Attribute 2",
"colType": "date",
"isListType": "N",
"userColumnOptions": ""
},
{
"userColumnName": "Attribute 3",
"colType": "string",
"isListType": "N",
"userColumnOptions": ""
},
{
"userColumnName": "Attribute 4",
"colType": "number",
"isListType": "N",
"userColumnOptions": ""
}
]
name: string;
uiExpression = {};
fieldsS = {}
@Input() config: QueryBuilderConfig = {
fields: {}
}
userExpression: String = 'Attribute = undefined';
constructor() {
this.name = `Plunker! v${VERSION.full}`;
for (var i = 0; i < this.AttributeDummy.length; i++) {
// operators: (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[0].attributeType.toLowerCase()) ? this.operator.operators[0].operators :
// (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[1].attributeType.toLowerCase()) ? this.operator.operators[1].operators :
// (this.AttributeDummy[i].colType.toLowerCase()==this.operator.operators[2].attributeType.toLowerCase()) ? this.operator.operators[2].operators : ''
this.fieldsS[this.AttributeDummy[i].userColumnName] = {
name: this.AttributeDummy[i].userColumnName,
type: this.AttributeDummy[i].colType.toLowerCase(),
operators: this.operators,
options: this.AttributeDummy[i].userColumnOptions
}
this.config.fields = this.fieldsS;
this.detect.markForCheck();
console.log('config ', JSON.stringify(this.config))
}
if (this.AttributeDummy.length > 0) {
console.log('attributes length > 0');
this.uiExpression = {
condition: 'and',
rules: [
{
field: this.AttributeDummy[0].userColumnName,
operator: this.operators[0]
}
]
}
}
}
}
在更改属性时,我试图将查询构建器中的运算符动态更新到 UI 中。我将运算符(operator)列表更新到配置中,但它不会更新到 UI 中。
在这里,一个引用链接:https://zebzhao.github.io/Angular-QueryBuilder/demo/我想根据字段更新运算符。
最佳答案
我找不到任何好的文档。通过阅读 query-builder.component.js src 以了解它是如何工作的,我能够让它工作。
我在用
添加对您的 QueryBuilderComponent 的引用。
@ViewChild(QueryBuilderComponent, { static: true }) queryBuilder: QueryBuilderComponent;
然后在更新配置后,调用 queryBuilder 上的 changeField 以使用新的配置值更新 UI。
//set the options for your field
this.config.fields['myField'].options = [
{name: 'a', value:'1'},
{name: 'b', value:'2'},
{name: 'c', value:'3'}
]
this.refreshField('myField);
private refreshField(field: string): void {
// get the current rule
const srcRule = this.queryBuilder.data.rules.find((x: Rule) => x.field === field) as Rule;
if (srcRule) {
// cache the current rule's selected value from our datasource
const value = srcRule ? srcRule.value : undefined;
// call change field to rebind new options to the UI
this.queryBuilder.changeField(field, srcRule);
// reset the previously selected value to the dropdown because changeField nulls out the value.
srcRule.value = value;
}
}
关于angular - 动态更改 angular2-query-builder 中的配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53312918/
我只是不喜欢 Logback 的 XML 或 Groovy 配置,而更喜欢用 Java 进行配置(这也是因为我将在初始化后的不同时间在运行时更改配置)。 似乎对 Logback 进行 Java 配置的
我的 sphinx 配置是: ================================ config/sphinx.yml development: bin_path: "/usr/loc
我们计划在生产服务器中部署我们的系统。我有兴趣了解更多有关优化网站性能的信息。 Sitecore 有哪些优化建议? (缓存,网络配置中的其他设置) 我们可以在 IIS 中做哪些优化? 找不到关于这些主
我有一个 Django 应用程序,可以处理网站的两个(或更多)部分,例如网站的“admin”和“api”部分。我还为网站的其余部分提供了普通的 html 页面,其中不需要 Django。 例如,我希望
我刚刚开始研究Docker。我有一个 Node 应用程序,可以调整大小和图像,然后在完成后向 aws 发送 SQS 消息。我已成功创建应用程序的 docker 镜像,并从本地计算机复制它,但遇到了无法
如何配置 checkstyle(在 Ant nt Maven 中)任务?我尝试了一点,但没有正确收到报告。这是我的 Ant 脚本。
我正在使用 Quartz 和 Spring 框架重写一个遗留项目。原始配置是 XML 格式,现在我将其转换为 Java Config。 xml 配置使用 jobDetail 设置触发器 bean 的作
tl;rd: 使用主键对数据库进行分区 索引大小问题。 数据库大小每天增长约 1-3 GB 突袭设置。 您有使用 Hypertable 的经验吗? 长版: 我刚刚建立/购买了一个家庭服务器: 至强 E
在安装 gcp 应用程序后,我们尝试使用 GCP 的图形 api 配置 Azure Active Directory saml 配置。我们正在遵循相同的 AWS graph api saml 设置 U
我刚刚了解了 spring security 并想使用 java hibernate 配置连接到数据库,但我发现的示例或教程很少。我通过使用 xml 配置找到了更多。我在这里使用 Spring 4.0
我们最近切换到 Java 8 以使用 java.time API(LocalDate、LocalDateTime,...)。因此,我们将 Hibernate 依赖项更新到版本 4.3.10。我们编写了
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是《quarkus实战》系列的第六篇,咱
我是 NGINX 的新手,我正在尝试对我们的 ERP 网络服务器进行负载平衡。我有 3 个网络服务器在由 websphere 提供支持的端口 80 上运行,这对我来说是一个黑盒子: * web01.e
我们想使用 gerrit 进行代码审查,但我们在 webview 中缺少一些设置。 是否可以禁止提交者审查/验证他们自己的 提交? 是否有可能两个审稿人给 +1 一个累积它 到+2,以便可以提交? 谢
配置根据运行模式应用于 AEM 实例。在多个运行模式和多个配置的情况下,AEM 如何确定要选择的配置文件?假设以下配置在 AEM 项目中可用, /apps /myproject - con
我正在使用 Neo4j 服务器。我遇到了负载相对较低的问题。但是,响应时间相当长。我认为为请求提供服务的线程数太少了。有没有办法调整为 HTTP 请求提供服务的线程池的大小。那可能吗? 最佳答案 线程
我在/etc/default/celeryd 中有以下配置 CELERYD_NODES = "worker1 worker2 worker3" CELERYD_CHDIR = "path to pro
Plone 在其页面中显示来 self 的母语(巴西葡萄牙语)的特殊字符。但是,当我使用我创建的 spt 页面时,它会显示转义序列,例如: Educa\xc3\xa7\xc3\xa3o 代替 Educ
我正在尝试开始使用 Emacs/Clojure。安装 emacs 扩展的正确方法是什么。我正在尝试安装以下插件: https://bitbucket.org/kotarak/vimclojure 我已
我有一个简单的 C 项目结构: proj/ src/ docs/ build/ tests/ lib/ 尝试编写合适的 CMake 文件。 到目前为止我的尝试:http://pas
我是一名优秀的程序员,十分优秀!