gpt4 book ai didi

angular - 如何在焦点上显示自动完成选项

转载 作者:行者123 更新时间:2023-12-04 14:41:19 27 4
gpt4 key购买 nike

我正在用最新的 angular-material 编写一个 angular6 应用程序。
我使用组件 mat-autocompletemat-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()));
}
...
}
当我查看 mat-autocomplete示例在 https://material.angular.io/components/autocomplete/examples ,当我专注于输入元素时,我确实看到了所有结果..
有什么不同?我错过了什么?

最佳答案

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

感谢 Swox 帮助我注意到它。

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()));
});

关于angular - 如何在焦点上显示自动完成选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52536382/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com