Показать спиннер ngx-ui-loader при автозаполнении - PullRequest
Новая
       8

Показать спиннер ngx-ui-loader при автозаполнении

0 голосов
/ 12 февраля 2020

Служа данным из службы для автоматического заполнения контента поиска в указанном элементе c, ожидание занимает некоторое время.

Остальные ожидания решаются путем включения в app.component. html Селектор

ngx-ui-loader

The документация этого модуля.

Место, необходимое для слушания, будет следующим: 

<mat-form-field>
  <mat-label>Example Label</mat-label>
    <input type="text" matInput [matAutocomplete]="auto" (ngModelChange)="filterOptions($event)" 
       formControlName="test">
      <div ngxUiLoaderBlurred [loaderId]="'loader-autocomplete'">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionDataChange($event)"
          [displayWith]="displayFn">
          <mat-option *ngFor="let option of optionsList" [value]="option">
            {{ option }}
          </mat-option>
        </mat-autocomplete>
     </div>
</mat-form-field>

Загрузка данных в массив optionsList выполняется следующим образом: 

getOptions(fam: string, writing?: string) {
  const params: HttpCallModel = {
    ustoken: this.storage.get('token'),
    pattern: writing
  };
  this.optionsList = [];

  // start non-master loader
  this.ngxLoader.startLoader('loader-autocomplete');

  this.selSrv.getOptionsByFamilias(params, fam).subscribe(
    (resp: OptionsListData[]) => {
      resp.forEach(element => {
        this.optionsList.push({ option: element.name, value: element.code });

        this.ngxLoader.stopLoader('loader-autocomplete');

      });
    }, (err) => {
      console.log(err);
    }
  );
}

Как я могу сделать, чтобы показать счетчик в списке вариантов?

...