Odtnhj

Here, i am trying to change the operators based on the field value in Angular2-query-builder. My TS file.

 @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]
 
 ]
 
 
 
 

while changing the attribute am trying to update operators in the query builder dynamically into the UI. I updating the operators list into config but it won't updating into the UI.

Here, one reference link: https://zebzhao.github.io/Angular-QueryBuilder/demo/ I want to update the operators based on the field.