Удаленный автозаполнение запроса

Question

Я новичок в Angular и пытаюсь создать форму автозаполнения с содержимым, отфильтрованным в серверной части. У меня есть класс и интерфейс для терминала:

export class Terminal {
  constructor(
      public id: number,
      public name: string,
      public city: string,
      public country: string) {}
}


export interface ITermianlResponse {
  results: Terminal[];

Тогда у меня есть услуга:

@Injectable()
export class Service {

  constructor(private http: HttpClient) {}

  search(value): Observable<ITermianlResponse> {
    return this.http.get<ITermianlResponse>('http://127.0.0.1:8000/api/v1/public/terminal_ac/?q=' + value)
    .pipe(
      tap((response: ITermianlResponse) => {
        response.results = response.results
          .map(terminal => new Terminal(terminal.id, terminal.name, terminal.city, terminal.country))
        return response;
      })
  );

  }
}

Бэкэнд получит мой запрос и даст ответ, как для Шана:

{"results": [{"id": "1", "name": "Shanghai Terminal", "city": "Shanghai", "country": "China"}], "pagination": {"more": false}}

Мой компонент ниже:

export class SearchComponent implements OnInit {
  filteredTerminals: ITermianlResponse;
  terminalsForm: FormGroup;

  constructor(private fb: FormBuilder, private Service: Service) {}

  ngOnInit() {
    this.terminalsForm = this.fb.group({
      terminalInput: null
    })

    this.terminalsForm.get('terminalInput').valueChanges
    .pipe(
        debounceTime(300),
        switchMap(value => this.Service.search(value)),
    ).subscribe(result => this.filteredTerminals = result);
  }


  displayFn(terminal: Terminal) {
    if (terminal) { return terminal.name; }
  }

}

И, наконец, мой HTML:

<form class="example-form" [formGroup]='terminalsForm'>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Choose a terminal" [matAutocomplete]="auto" formControlName='terminalInput'>
  </mat-form-field>
  <span>Your choice is: {{terminalsForm.get('terminalInput').value | json}}</span>

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let terminal of (filteredTerminals | async)?.results" [value]="terminal">
        <span>{{ terminal.name }}</span>
        <small> | ID: {{terminal.id}}</small>
      </mat-option>
  </mat-autocomplete>
</form>

Как я уже сказал, серверная часть получает мой запрос, но браузер поднимает консоль и выдает ошибку SearchComponent.html:9 ERROR Error: InvalidPipeArgument:. Что я делаю неправильно? Спасибо!

Answer 1

Как я уже писал, ваша проблема была в асинхронном канале, который вы использовали в

let terminal of (filteredTerminals | async)?.results

, и, конечно, потому что отфильтрованные терминалы не наблюдаемы или не обещают.