如何在 Angular 中实现自动完成？答案

【问题标题】：How to implement auto-complete in Angular?如何在 Angular 中实现自动完成？
【发布时间】：2019-12-03 16:13:04
【问题描述】：

我需要在 Angular 中实现自动完成。

我试过这个https://material.angular.io/components/autocomplete/overview 但得到以下错误：

错误 TS2339 (TS) 属性“管道”在类型“主题”上不存在

【问题讨论】：

请分享您实现的代码。
更正了标签、标题和问题

标签： angular autocomplete

【解决方案1】：

使用以下代码：-

demo.component.html

 <input type="text" [matAutocomplete]="auto">
    <mat-autocomplete class="auto-dropdown"#auto="matAutocomplete">
    <mat-option *ngFor="let fruit of filteredFruits" [value]="fruit">
    {{fruit}}
    </mat-option>
    </mat-autocomplete>

demo.component.ts

 this.fruits.forEach( fruit => {
             this.listofFruitsArray.push(fruit.fruitName);
          });
          this.demoForm.valueChanges.subscribe(fruit => {
            const { favFruit } = fruit;
              this.filteredFruits = this.filterValues(favFruit);
          });


filterValues(search: string){
         return this.listoFruitsArray.filter( fruit => 
         fruit.toLowerCase().indexOf(search.toLowerCase()) === 0);
        }

demo.module.ts

import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';


imports: [
MatInputModule,
    MatFormFieldModule
],

希望对你有帮助谢谢

【讨论】：