Question

我想从后端获取数据，所以我在angular7中使用rest调用。我正在使用Observables从后端访问数据。以下是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获取类别数组。请注意，我将在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”

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输入栏中键入内容时，出现了以上未定义的错误。

基本上，我不想每次使用mat-autocomplete搜索值时都对后端进行rest调用，相反，我们不能利用filteredCats可观察数组并从中过滤值吗？

在angular7中为垫自动完成引发未定义的错误

0 个答案: