1

我目前正在使用Angular-QueryBuilder并ng-container使用 -material 更新模板。

  <!-- Override input component for 'category' type -->
  <ng-container *queryInput="let rule; let field=field; let options=options; type: 'category'">
    <mat-form-field class="categoryValue" floatLabel="never">
      <mat-select [(ngModel)]="rule.value" [placeholder]="field.name">
        <mat-option *ngFor="let opt of options" [value]="opt.value">
          {{ opt.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </ng-container>

我的要求是options动态加载数据。即在用户开始输入后从服务器加载此字段的数据（我将使用mat-auto-complete而不是mat-select）。在为示例创建 stackblitz 时，我面临一些挑战。（到目前为止：https ://stackblitz.com/edit/angular-8-material-starter-template-lpmxwi ）

在此处输入图像描述

如果有人实现了类似的东西或给出了一些方向，那就太好了。

更新：

想强调的是，使用材料自动完成不是问题。为查询构建器组件集成自动完成和动态更新值是问题所在。如果我在初始化后以编程方式更新它，查询生成器不会填充值，如下所示。

  onFieldChange ($event, rule) { // gets called when I change the field dropdown
    if (this.params.config.fields[$event].type === 'category') {
        // updating 'options' (like male and female) dynamically
        // in actual scenario, I will be calling server to get its' values
        this.params.config.fields[$event].options = [
          { name: 'Aaa', value: 'a' },
          { name: 'Bbbb', value: 'b' },
          { name: 'Cccc', value: 'c' },
          { name: 'Dddd', value: 'd' }
        ];
    }
  }
4

1 回答 1

0

您可以做的是为您将要输入的输入创建一个 FormControl

myControl = new FormControl();

然后将其与您在 HTML 中的输入相关联

<input type="text"
       placeholder="Search"
       aria-label="Search"
       matInput
       [formControl]="myControl"
       [matAutocomplete]="auto">

最后，在您的组件中侦听值更改并请求新数据，然后您将其设置为您的选项

this.myControl.valueChanges
  .pipe(
    filter(searchPhrase => !!searchPhrase),
    debounceTime(500),
    distinctUntilChanged(),
    takeUntil(this.ngUnsubscribe) // optional but recommended 
  )
  .subscribe(searchPhrase => this.service.searchMyOptions(searchPhrase));
于 2020-03-26T10:02:13.353 回答