Angular Query-builder: как лениво загружать данные для опций (возможных значений) для автозаполнения материала - PullRequest
Новая
       5

Angular Query-builder: как лениво загружать данные для опций (возможных значений) для автозаполнения материала

0 голосов
/ 26 марта 2020

В настоящее время я работаю с Angular -QueryBuilder и обновляю шаблоны для с 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>

My Требуется загрузить данные для options динамически. т.е. загрузка данных для этих полей с сервера после того, как пользователь начнет печатать (я буду использовать mat-auto-complete вместо mat-select). Я сталкиваюсь с некоторыми проблемами при создании стекаблица для примера. (на данный момент: https://stackblitz.com/edit/angular-8-material-starter-template-lpmxwi)

enter image description here

Если кто-то реализовал что-то подобное или дать какое-то направление, это было бы действительно здорово.

Обновление:

Хотелось бы подчеркнуть, что использование автозаполнения материала не является проблемой. Проблема заключается в интеграции автозаполнения и динамического обновления значений для компонента построения запросов. Построитель запросов не заполняет значения, если я обновляю его программно после его инициализации, как показано ниже. 

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

1 Ответ

0 голосов
/ 26 марта 2020

Что вы можете сделать, это создать 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));
...