如何重点显示自动完成选项 [英] how to show autocomplete options on focus
问题描述
:)
我正在用最新的angular-material编写angular6应用程序.
I'm writing an angular6 application with latest angular-material.
我将组件mat-autocomplete
与mat-input
一起使用,以实现自动完成功能.
I use the component mat-autocomplete
with a mat-input
for an auto-complete feature.
我想要实现的是,当用户专注于输入元素时,即使没有键入任何内容,他也将看到所有可用的自动完成选项.
what I'm trying to achieve is that when the user focus on the input element, he will see all the available auto-complete options even without typing anything.
这是mat-autocomplete组件的html文件
this is the html file of the mat-autocomplete component
<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/查看mat-autocomplete
示例时组件/自动填充/示例,当我专注于输入元素时,我确实会看到所有结果.
when I check the mat-autocomplete
examples at https://material.angular.io/components/autocomplete/examples, there when I focus on the input element I do see all the results..
有什么区别?我想念什么?
what's the difference? what am I missing ?
谢谢
推荐答案
在页面加载时执行过滤器.但是我在graphql上加载了数据,因此数据在第一个过滤器执行后到达.我对其进行了更改,以便仅在接收到数据后才执行过滤器.
the filter is executed when the page loads.. but I loaded the data on graphql so the data arrived after the first filter executed. I changed it so the filter will be executed only after the data was received.
感谢Swoox帮助我注意到它.
thanks Swoox for helping me notice it.
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()));
});
这篇关于如何重点显示自动完成选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!