Angular 查询生成器模块如何为自定义日期功能创建查询

Question

我正在尝试在 angular 中创建一个过滤器页面 UI。为此，我正在使用 angular2-query-builder 模块。

对于日期字段，我尝试提供表达式和自定义日期以用于过滤目的。例如，用户可以从“今天”、“昨天”、“明天”和“自定义日期”等多个选项中选择 select。我想在选择自定义日期选项时显示日期选择器。

根据存储库中的代码 - angular2-query-builder-demo，如果我提供选项参数，我可以为 select 选项之一提供下拉列表。而且我也可以仅在“自定义日期”选项为 selected 时显示日期选择器。但是我无法从日期选择器中 select 一个日期并将其传递给查询。

我当前拥有的组件中的配置对象：

config: QueryBuilderConfig = {
    fields: {
      name: { name: 'Name', type: 'string' },
      notes: { name: 'Notes', type: 'textarea', operators: ['=', '!='] },
      dateCondition: {
        name: 'Date Condition',
        type: 'dateCategory',
        operators: ['=', '<=', '>'],
        options: [
          { name: 'Today', value: 'today' },
          { name: 'Yesterday', value: 'yesterday' },
          { name: 'Custom Date', value: 'customDate'}
        ],
      }
    },
  }

我手上对应的模板代码是

    <ng-container
      *queryInput="
        let rule;
        type: 'dateCategory';
        let options = options;
        let onChange = onChange
      "
    >
      <mat-form-field>
        <mat-select [(ngModel)]="rule.value" (ngModelChange)="onChange()">
          <mat-option *ngFor="let opt of options" [value]="opt.value">
            {{ opt.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field  *ngIf="rule.value=='customDate'">
        <input
          matInput
          [matDatepicker]="picker"
          [(ngModel)]="rule.value"
          (ngModelChange)="onChange()"
        />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </ng-container>

我的问题是如何将所选自定义日期的值传播给查询？我知道我在这里遗漏了一些非常愚蠢的东西。但是我想不通。

Answer 1

我发现您的代码有几处错误：

您正在模板内创建变量并使用它们 ngModel。我不确定这会奏效。您需要在组件中创建模型，然后将它们用作 ngModels 以与 Angular
关联
如果您的唯一目的是数据和模板操作，那么您使用 Angular 的方式是错误的。 Reactive Forms
你会过得更好
因此 *ngIf="rule.value=='customDate'" 如果您使用正确的 Angular 模型，您的输入将在添加值时消失。

Angular 查询生成器模块如何为自定义日期功能创建查询

Angular query builder module how to create query for custom date functionality

query-builder

angular-material

angular