Угловое автозаполнение с http запросом - PullRequest
0 голосов
/ 02 мая 2019

Я пытаюсь получить отфильтрованный список опций из базы данных MySql. Я получаю ответ json, разобранный в массив объектов, но .switchMap ожидает наблюдаемую коллекцию.

Я пытался преобразовать ответ (массив объектов) в наблюдаемый с помощью

import { Observable } from 'rxjs';
import { of } from 'rxjs';

Html

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

Машинопись:

filteredUsers: Observable<IUserResponse>;

...

ngOnInit() {
    this.getNewOrderData();

    this.usersForm = this.fb.group({
      userInput: null
    })

    this.filteredUsers = this.usersForm.get('userInput').valueChanges
      .pipe(
        debounceTime(700),
        switchMap(value => this.search({name: value}))
      );    
  }

  search(searchTerm) : Observable<IUserResponse>{
    console.log(searchTerm);

    let data = {"searchTerm": searchTerm.name };
    let dataJson = JSON.stringify(data);

    this.dataServiceTopCarpet.fetchData("clientSearch", dataJson)
    .subscribe(
      (response) => {
        this.spinner.stop();
        //console.log(response.text());
        var data = JSON.parse(response.text());
        console.log(data);
        if(data.Status == "Success"){
          this.clienti = data.Data;
          //this.filteredUsers = of(data.Data);
          //console.log(this.filteredUsers);
            /*
            data.Data.forEach(element => {
              console.log(element);
            });
            */
        }
        else{
          alert("Error1");
          console.log(data);
          this.authService.loggedIn = false;
          this.router.navigate(['/sign-in']);
        }

      },
      (error) => {
        alert(error);
      }
    );

    return new Observable<IUserResponse>();
  } 

Итак, FilterUsers является источником автозаполнения, и у меня есть массив объектов.

Я пытался удалить асинхронную опцию из:

<mat-option *ngFor="let user of (filteredUsers | async)?.results" [value]="user">

Или преобразование массива объекта в наблюдаемую коллекцию. Попробовал другой пример использования debounceTime и switchMap.

Спасибо за любую помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...