Question

在这里，我试图根据Angular2-query-builder中的字段值更改运算符。我的TS文件。

rustup-init -y

在更改属性时，尝试将查询构建器中的运算符动态更新到UI中。我将运算符列表更新为config，但不会更新为UI。

在这里，一个参考链接：https://zebzhao.github.io/Angular-QueryBuilder/demo/我想根据该字段更新运算符。

Answer 1

我找不到任何好的文档。我可以通过阅读query-builder.component.js src来了解它的工作原理。

我正在使用

angular2-query-builder 0.4.2
角度8.0.0

添加对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;
    }
}

动态更改angular2-query-builder中的配置

1 个答案: