Angular Query-builder:如何懒惰地加载材料自动完成选项(可能值)的数据

Question

我目前正在使用Angular-QueryBuilder，并使用angular-material与ng-container一起更新模板。

  <!-- 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' }
        ];
    }
  }

Answer 1

您所能做的就是为您的输入创建一个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));