使用angular2-query-builder遇Can't bind to 'ngModel'错误求助

可能的原因及解决方案 #

1. 确认FormsModule已导入 #

ngModel 指令属于Angular的FormsModule，即使已导入QueryBuilderModule，也需要在app.module.ts中显式导入FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { QueryBuilderModule } from 'angular2-query-builder';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule, // 添加到imports数组
    QueryBuilderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 改用组件原生的双向绑定属性 #

angular2-query-builder v0.6.2 可能不支持ngModel双向绑定，该组件本身提供了query输入属性和queryChange输出事件，可直接用Angular双向绑定语法绑定query：

<query-builder [(query)]="query" [config]="config"></query-builder>

组件类中定义对应变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  query = {
    condition: 'and',
    rules: []
  };

  config = {
    fields: {
      name: { name: 'Name', type: 'string' },
      age: { name: 'Age', type: 'number' }
      // 自定义其他字段配置
    }
  };
}

3. 升级组件版本适配Angular 13 #

angular2-query-builder v0.6.2 发布时间较早，可能不完全兼容Angular 13。可尝试升级到适配版本：

npm install angular2-query-builder@^0.7.0 --save

升级后参考组件文档确认绑定方式，新版本通常会优化与高版本Angular的兼容性。

内容的提问来源于stack exchange，提问作者chandan kumar