如何在焦点上显示自动完成选项答案

【问题标题】：How to show autocomplete options on focus如何在焦点上显示自动完成选项
【发布时间】：2019-03-03 07:59:16
【问题描述】：

我正在用最新的 angular-material 编写一个 angular6 应用程序。

我使用组件 mat-autocomplete 和 mat-input 来实现自动完成功能。

我想要实现的是，当用户关注输入元素时，即使不输入任何内容，他也会看到所有可用的自动完成选项。

这是mat-autocomplete组件的html文件：

<form [formGroup]="carTypeFormGroup" (ngSubmit)="okButton()">
  <mat-form-field>
    <input matInput formControlName="carCompany"
           placeholder="foo" aria-label="foo" [matAutocomplete]="autoCarCompany">
    <mat-autocomplete  #autoCarCompany="matAutocomplete">
      <mat-option *ngFor="let carCompany of filteredCarCompanies | async" [value]="carCompany">
        <span>{{carCompany}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
...

这是组件类的代码：

@Component({
  selector: 'app-car-type',
  templateUrl: './car-type.component.html',
  styleUrls: ['./car-type.component.scss']
})
export class CarTypeComponent implements OnInit {

  carTypeFormGroup: FormGroup;

  filteredCarCompanies: Observable<CarType[]>;
  filteredCarModels: Observable<CarType[]>;
  carCompanies = [];
  carCompaniesLowercase = [];
  carModels = [];
  carTypes = [];

 private _filterCarCompanies(value: string): CarType[] {
    if (this.carCompaniesLowercase.indexOf(value.toLowerCase()) >= 0) {
      this.mainGql.GetCarModels(value).subscribe((data: any) => {
        this.carModels = [];
        data.data.car_models.forEach((row) => {
          this.carModels.push(row.model_name);
        });
      });
    }
    const filterValue = value.toLowerCase();
    return this.carCompanies.filter(carCompany => carCompany.toLowerCase().indexOf(filterValue) === 0);
  }

ngOnInit() {
    this.carTypeFormGroup = this.formBuilder.group({
      carCompany: ['', Validators.required],
      carModel: ['', Validators.required],
      carType: ['', Validators.required],
      carYear: [new Date().getFullYear(), Validators.required]
    });
    this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
      .pipe(startWith(''), map(carCompany => carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
}
...
}

当我在https://material.angular.io/components/autocomplete/examples 检查mat-autocomplete 示例时，当我专注于输入元素时，我确实看到了所有结果..

有什么区别？我错过了什么？

【问题讨论】：

这是在第一次之后获得还是在您过滤并再次打开之后获得？
@Swoox - 第一次
我认为你必须从你的 map(carCompany => 开始并检查它是否返回数据并从那里开始工作并找出它为什么不工作。接下来我看不出有什么问题。 .
@Swoox - 谢谢。帮我解决了问题
不客气 :)

标签： angular autocomplete angular-material

【解决方案1】：

过滤器在页面加载时执行。但我在graphql上加载了数据，所以数据在第一个过滤器执行后到达。我更改了它，因此只有在收到数据后才会执行过滤器。

感谢 Swoox 帮助我注意到这一点。

ngOnInit() {
 ...
 this.carsService.GetCarCompanies().subscribe((data: any) => {
      this.carCompanies = [];
      this.carCompaniesLowercase = [];
      data.data.car_companies.forEach((row) => {
        this.carCompanies.push(row.company_name);
        this.carCompaniesLowercase.push(row.company_name.toLowerCase());
      });
      this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
        .pipe(startWith(''), map(carCompany => carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
    });

【讨论】：

【解决方案2】：

有两种解决方案。

您还可以在 observables 的设置超时内添加过滤器：

setTimeout(()=>{ 
this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
        .pipe(startWith(''), map(carCompany => 
        carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
},0);

添加debounceTime(500):

this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
        .pipe(startWith(''),debounceTime(500), map(carCompany => 
        carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));

【讨论】：