Неопределенная ошибка, генерируемая для автозаполнения mat в angular7 - PullRequest
Новая
       35

Неопределенная ошибка, генерируемая для автозаполнения mat в angular7

0 голосов
/ 27 марта 2019

Я хочу получить данные из бэкэнда, поэтому я использую остальные вызовы в angular7.Я использую наблюдаемые для доступа к данным из бэкэнда.Ниже приведен код для services.ts 

public getCategories(){
        let categories = this.http.get("http://localhost:8080/hiya/category/get-categories?childLevels=0&pageNo=0&pageSize=1");
    return categories;
    }

Как показано в приведенном выше коде, если запрос является пустой строкой, иначе будет выполнен цикл, и массив API будет получен из API.Обратите внимание, что я возвращаю список в services.ts

Ниже приведен файл component.ts 

 ngOnInit() {
            this.catCtrl = new FormControl();
            this.filteredCats = this.catCtrl.valueChanges
            .pipe(
              startWith<string | Category>(''),
              map(value => typeof value === 'string' ? value : value.name),
              map(catName => this.onautoComplete(catName)),
              flatMap(val=>val)
            );          
        }

 onautoComplete(query){
        let q = query ? query.trim() : null;
        if(q && q != ''){
        return of(this.filteredCats).pipe(
            flatMap(x=>x),
            filter(x => x.name.toLowerCase().indexOf(q.toLowerCase()) >= 0),
            toArray()
        );
    }
    else{
          return this.catServices.getCategories();
    }
 }

Я использую компонент mat-autcomplete, и в приведенном выше коде массив преобразуется в типнаблюдаемый, что хорошо.Также я могу заполнить данные в формате HTML.Но, скажем, если я хочу найти данные из приведенного выше списка, используя mat-autocomplete, я получаю ошибку ниже в component.ts

core.js: 12301 ОШИБКА TypeError: Невозможно прочитать свойство 'toLowerCase' изundefined

HTML-код показан ниже 

  <form class="example-form">
                        <mat-form-field class="example-full-width">
                            <input type="text" placeholder="Select Category" aria-label="Category" matInput
                                [formControl]="catCtrl" [matAutocomplete]="categories">
                            <mat-autocomplete autoActiveFirstOption #categories="matAutocomplete"
                                [displayWith]="displayFn">
                                <mat-option *ngFor="let category of filteredCats | async" [value]="category">
                                    {{category.name}}
                                </mat-option>
                            </mat-autocomplete>
                        </mat-form-field>
                    </form>

Проблема: toLowerCase (), я использовал в цикле if функции автозаполнения.Таким образом, проблема в init все категории показаны в html.Но когда я набираю в строке ввода mat-autocomplete, я получаю вышеуказанную неопределенную ошибку.

По сути, я не хочу делать оставшиеся вызовы для backend каждый раз, когда ищется значение с помощью mat-autocomplete, вместо этого мы не можем использовать наблюдаемый массив FilterCats и отфильтровать его значение?

...