Асинхронное заполнение углового автозаполнения? - PullRequest
Новая
       14

Асинхронное заполнение углового автозаполнения?

0 голосов
/ 29 октября 2019

В настоящее время у меня есть функция, которая получает массив объектов Category [] из API, модель Category выглядит следующим образом: 

class CategoryModel {
    constructor(
        public id: number,
        public title: string,
        public clues_count: number,
    ) { }
}

export {CategoryModel};

Мы используем API следующим образом: 

  populateCategories() {
    this.api.getCategories$()
    .subscribe((response)=>{
        this.category = response;
    });
  }
}

заполняет переменную с именем category: CategoryModel[];

У меня есть автозаполняемый угловой объект, который выглядит следующим образом и получает переменную категории: 

      <form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Category..." aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let cat of category | async" [value]="category">
              {{cat.id}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>

Есть ли способ заполнитьэто даже если переменная категории заполняется асинхронно?

1 Ответ

1 голос
/ 29 октября 2019

Асинхронный канал может работать только с обещаниями или наблюдаемыми.

Так что если вы делаете это так, оно должно работать:

Добавить открытое поле в ваш компонент: 

categories$ = this.api.getCategories$()

И заменить категорию на категории $, как в примере ниже: 

<mat-option *ngFor="let cat of categories$ | async" [value]="category">
...