Библиотека автозаполнения Angular Material не заполняет массив опций в шаблоне из удаленного источника - PullRequest
Новая
       20

Библиотека автозаполнения Angular Material не заполняет массив опций в шаблоне из удаленного источника

0 голосов
/ 02 октября 2018

У меня есть следующий компонент, который использует компонент автозаполнения Angular Material для заполнения параметров - он получает данные из внешнего источника (я вижу данные в журнале консоли), однако эти данные никогда не заполняют возвращенные данные в filteredOptions переменная - Кто-нибудь может подсказать, что я делаю неправильно с кодом ниже: -

/ ** машинопись **

import {Component, OnInit} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {GifpickerService} from "./gifpicker.service";

@Component({
  selector: 'app-gifpicker',
  templateUrl: './gifpicker.component.html',
  styleUrls: ['./gifpicker.component.scss'],
  providers: [ GifpickerService ],
})
export class GifpickerComponent implements OnInit {
  public gifPickerVisible: boolean = false;
  public myControl = new FormControl();
  public filteredOptions: Observable<string[]>;

  constructor(
    public gifpickerService: GifpickerService
  ) {}

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.map(q => this.searchTenor(q));
  }

  searchTenor(searchTerm: any): any {
    this.gifpickerService.search(searchTerm);
  }

}

/ ** html компонента ** / 

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

/ ** Сервис ** / 

import { Injectable } from '@angular/core';
import { ApiService } from "../../services/api.service";
import { HttpClient,  HttpParams, HttpResponse} from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import { timeout } from 'rxjs/operators';

@Injectable()
export class GifpickerService {

    public items: Array<object>;

    constructor(
        private http: HttpClient,
        private apiService: ApiService
    ) { }

    search(searchTerm: string): any {
        let url = this.apiService.getApiUrl('gif/search');
        let params = new HttpParams();
        params = params.append('q', searchTerm);

        return this.http.get(url, {params: params})
           .subscribe(response => {
              console.log(response);
            });
     };
}
...