跳到主要内容

QueryBuilderComponent<T>

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:130

Angular Query Builder 主组件

Description​

提供可视化的查询条件构建界面,支持:

  • 传入 SchemaInfo 或 FieldMetadata[] 定义可用字段
  • 拖拽重排规则和分组
  • 嵌套分组(最大 5 层)
  • 实时验证

Example​

<rxdb-query-builder
[schema]="schema"
(queryChange)="onQueryChange($event)"
/>

Type Parameters​

Type Parameter
T extends object

Implements​

  • OnDestroy

Constructors​

Constructor​

new QueryBuilderComponent<T>(): QueryBuilderComponent<T>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:219

Returns​

QueryBuilderComponent<T>

Properties​

dragDropHandler​

readonly dragDropHandler: QueryDragDropHandler;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:178


enableCollapse​

readonly enableCollapse: InputSignal<boolean>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:176

是否开启分组展开/收起功能(默认开启)


enableDrag​

readonly enableDrag: InputSignal<boolean>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:171

是否开启拖拽排序功能(默认开启)


fields​

readonly fields: InputSignal<FieldMetadata[]>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:151

字段列表(直接传入,优先于 schema)


fieldsComputed​

readonly fieldsComputed: Signal<FieldMetadata[]>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:191

计算后的字段列表


hasRules​

readonly hasRules: Signal<boolean | undefined>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:214

是否有规则


height​

readonly height: InputSignal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:166

内容区域最大高度(超出后滚动),支持任意 CSS 长度值,如 '400px'、'50vh'


initialQuery​

readonly initialQuery: InputSignal<
| RxDBQueryOutput<T>
| undefined>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:156

初始查询条件(可选)


maxDepth​

readonly maxDepth: InputSignal<number>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:161

最大嵌套层级(默认 5)


queryChange​

readonly queryChange: OutputEmitterRef<RxDBQueryOutput<T>>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:183

查询条件变更事件


rootGroup​

readonly rootGroup: Signal<UIRuleGroup | undefined>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:203

根规则组


schema​

readonly schema: InputSignal<SchemaInfo | undefined>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:146

Schema 信息,包含字段定义


validationChange​

readonly validationChange: OutputEmitterRef<ValidationResult>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:188

验证状态变更事件


validationErrors​

readonly validationErrors: Signal<ValidationError[]>;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:208

验证错误列表

Methods​

addFirstRule()​

addFirstRule(): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:276

添加第一个规则

Returns​

void


clearAll()​

clearAll(): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:291

清空所有规则

Returns​

void


ngOnDestroy()​

ngOnDestroy(): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:271

销毁服务

Returns​

void

Implementation of​

OnDestroy.ngOnDestroy

onAddGroup()​

onAddGroup(parentId): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:302

添加子组到指定组

Parameters​

ParameterType
parentIdstring

Returns​

void


onAddRule()​

onAddRule(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:296

添加规则到指定组

Parameters​

ParameterType
event{ parentId: string; rule: Omit<UIRule, "id">; }
event.parentIdstring
event.ruleOmit<UIRule, "id">

Returns​

void


onKeyDown()​

onKeyDown(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:323

键盘快捷键处理

Parameters​

ParameterType
eventKeyboardEvent

Returns​

void


onRemoveItem()​

onRemoveItem(id): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:308

删除规则或组

Parameters​

ParameterType
idstring

Returns​

void


onUpdateCombinator()​

onUpdateCombinator(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:318

更新组合器

Parameters​

ParameterType
event{ combinator: "and" | "or"; id: string; }
event.combinator"and" | "or"
event.idstring

Returns​

void


onUpdateRule()​

onUpdateRule(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/query-builder/query-builder.component.ts:313

更新规则

Parameters​

ParameterType
event{ id: string; updates: Partial<UIRule>; }
event.idstring
event.updatesPartial<UIRule>

Returns​

void