动态更改angular2查询生成器中的配置

在这里，我试图根据Angular2查询生成器中的字段值更改运算符。我的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]
                  }
                ]
              }
            }
          }
        }

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
+统治
+规则集
-规则集
去除
及
或
{{opt.name}
{{field.name}
{{value}}
{{userExpression}}
`,
})    
导出类应用程序{
公共运营商=[
{
“attributeType”：“字符串”，
“运营商”：[
{“displayOperator”：“Equals”，“sqlOperator”：“=（VALUE）”}，
{“displayOperator”：“不等于”，“sqlOperator”：（值）}，
{“displayOperator”：“以开始”，“sqlOperator”：“LIKE%（VALUE）”}，
{“displayOperator”：“结束于”，“sqlOperator”：“LIKE（VALUE）%”，
{“displayOperator”：“Contains”，“sqlOperator”：“LIKE%（VALUE）%”，
{“displayOperator”：“不包含”，“sqlOperator”：“不喜欢%（值）”}，
{“displayOperator”：“不以”“sqlOperator”：“不喜欢（值）%”开头”}，
{“displayOperator”：“不以”“sqlOperator”：“不喜欢%（值）%”结尾”}
]
},
{
“attributeType”：“数字”，
“运营商”：[
{“displayOperator”：“Equals”，“sqlOperator”：“=（VALUE）”}，
{“displayOperator”：“不等于”，“sqlOperator”：（值）}，
{“displayOperator”：“更大”，“sqlOperator”：“>（值）”}，
{“displayOperator”：“等于或大于”，“sqlOperator”：“>=（值）”}，
{“displayOperator”：“Less”，“sqlOperator”：“我找不到任何关于此的好文档。不过，通过阅读query-builder.component.js src来了解它的工作原理，我还是能够让它正常工作

我正在使用


angular2查询生成器0.4.2
角度8.0.0

添加对QueryBuilder组件的引用

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

你能不能把[（ngModel）]和[config]的值也贴出来？至少有一个示例字段，我们应该在ViewChild中将static设置为false，因为如果我们将其设置为true，则queryBuilder变量将在运行更改检测之前设置，并且我们会将queryBuilder设置为未定义。设置为false后，我能够访问queryBuilder变量。感谢此解决方案。