Angular Material Autocomplete库未从远程源填充模板中的选项数组

Question

我下面有以下组件，该组件使用Angular Material的AutoComplete组件来填充选项-这是从外部源获取数据（我可以在控制台日志中看到数据），但是该数据从未将返回的数据填充到{ 1}}变量-任何人都可以通过下面的代码建议我在做什么：-

/ **打字稿**

filteredOptions

/ **组件html ** /

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);
  }

}

/ **服务** /

<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>