угловая 7 ошибка с автозаполнением с использованием удаленных данных - PullRequest
Новая
       39

угловая 7 ошибка с автозаполнением с использованием удаленных данных

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

Я работаю с угловой 7

Я хочу реализовать поле ввода автозаполнения, используя удаленную дату json из API

Я безуспешно пытаюсь использовать этот код:

book.component.html 

 <form [formGroup]="registerForm">

   <mat-form-field class="example-full-width">
          <input matInput placeholder="Choose a book" [matAutocomplete]="auto" formControlName='userInput'>
        </mat-form-field>

        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
          <mat-option *ngIf="isLoading" class="is-loading"><mat-spinner diameter="50"></mat-spinner></mat-option>
          <ng-container *ngIf="!isLoading">
            <mat-option *ngFor="let book of filteredBook" [value]="book">
              <span>{{ book.fullname }}</span>
              <small> | ID: {{book.id}}</small>
            </mat-option>
          </ng-container>
        </mat-autocomplete>

        </form>

book.component.ts 

registerForm: FormGroup;
          filteredBook: Book[] = [];
          isLoading = false;


  ngOnInit() {


    this.registerForm
    .get('userInput')
    .valueChanges
    .pipe(
      debounceTime(300),
      tap(() => this.isLoading = true),
      switchMap(value => this.bookService.search({fullname: value}, 1)
      .pipe(
        finalize(() => this.isLoading = false),
        )
      )
    )
    .subscribe(books => this.filteredBook = books);

  }

  displayFn(book: Book) {
    if (book) { return book.fullname; }
  }

book.component.service 

 type EntityArrayResponseType = HttpResponse<Book[]>;


  search(filter: {fullname: string} = {fullname: ''}, page = 1): Observable<Book[]> {
    return this.http.get<Book[]>(this.url)
    .pipe(
      tap((response: Book[]) => {    


       response
        .map(book => new Book(book.id, book.fullname))
       .filter(book => book.fullname.includes(filter.fullname)

      )

      return response;
      })
      );
  }

, когда я пытаюсь проверить этот код, у меня появляется эта ошибка: 

core.js:15437 ERROR TypeError: Cannot read property 'includes' of undefined

, несмотря на то, что у меня есть некоторые данные в отклике

Iпопробуйте также внести некоторые изменения в book.component.service 

  type EntityArrayResponseType = HttpResponse<Book[]>;
    public  temp = [];


  getBokkList(): Book[] {
      let book : Book;
      let bookGroupObjects = new Array();
      this.query({
        lang:  'FR',
      }).subscribe((res: HttpResponse<Book[]>) => {

        this.temp = res.body;
        this.temp.forEach((x) => {

        book=new Book(x.id);
        book.fullname=x.fullname;
          bookGroupObjects.push(book);

        });

      });
      return bookGroupObjects;

    }

  search(filter: {fullname: string} = {fullname: ''}, page = 1): Observable<Book[]> {
    return this.http.get<Book[]>(this.url)
    .pipe(
      tap((response: Book[]) => {    


        this.getBokkList()
        .map(book => new Book(book.id, book.fullname))
       .filter(book => book.fullname.includes(filter.fullname)

      )

      return this.getBokkList();
      })
      );
  }

, но с этим кодом отображаются все книги и фильтр не работает

...