[英]Material Autocomplete Angular Stopping Api Call when Selected From the Autocomplete Dropdown options
I am using Material Angular Autocomplete Dropdown feature to fill place predictions in my dropdown. 我正在使用“材质角自动完成”下拉功能在下拉菜单中填充位置预测。 I am using onChange of material to call the api from the Service I have created.
我正在使用onChange的材质从我创建的服务中调用api。 My issue is that when I select predictions from the select box, an api call gets fired to the node server, because the onChange is fired again.
我的问题是,当我从选择框中选择预测时,会再次向节点服务器触发api调用,因为再次触发了onChange。 So, I want to stop the Api Call to the service when an option is selected from the dropdown.
因此,当从下拉列表中选择一个选项时,我想停止对服务的Api调用。 Here's the code of the template!!
这是模板的代码!
<mat-form-field>
<input matInput type="text" name="location" placeholder="Search By Location" aria-label="Location" [matAutocomplete]="auto" formControlName="location">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="location">
<mat-option *ngFor="let places of predictions" (optionSelected)="predictionSelected($event)" [value]="places.description">
<span>{{places.description}}</span>
</mat-option>
</mat-autocomplete>
<mat-form-field>
And in my component.ts I have written a function that would call my google maps services and would fetch my prediction onChange. 在我的component.ts中,我编写了一个函数,该函数将调用我的Google Maps服务并获取onChange的预测。 I have created an event function which is (optionSelected) which fires when value from the dropdown is selected.
我创建了一个事件函数,该函数(optionSelected)在从下拉列表中选择值时将触发。
predictionFilled = false;
ngOnInit() {
this.customForm.get('location').valueChanges.subscribe(
(value) => this.onChangeLocation(value)
);
}
onChangeLocation(location) {
if ( this.predictionFilled ) {
return;
}
this.googleMapsService.suggestPlaces(location);
this.placesPredictions = this.googleMapsService.getPredictionsUpdateListener().subscribe((predictions: Places[]) => {
console.log(predictions);
this.predictions = predictions;
});
}
predictionSelected(event: any) {
this.predictionFilled = true;
}
The issue is that when I click the options from the dropDown the event (optionSelected) is fired after the valueChanges event. 问题是,当我单击dropDown中的选项时,在valueChanges事件之后会触发事件(optionSelected)。 Technically, the event optionSelected should fire before the onChange but I don't understand why the event valueChanges is fired before the optionSelected event.
从技术上讲,事件optionSelected应该在onChange之前触发,但是我不明白为什么在optionSelected事件之前触发了valueChanges事件。
You are doing nothing with the event
inside predictionSelection()
. 您对
predictionSelection()
的event
没有任何处理。
You can simply write that single line within formControl valueChanges
event and remove (optionSelected)="predictionSelected($event)"
from the mat element
where it is registered. 您只需在formControl
valueChanges
事件中编写该行,然后从注册它的mat element
中删除(optionSelected)="predictionSelected($event)"
。 Also no need of predictionSelected(event : any)
method. 另外,不需要
predictionSelected(event : any)
方法。
To stop calling api call, you can check if the value entered exists in the predictions
array and then make the decision. 要停止调用api调用,您可以检查输入的值是否存在于
predictions
数组中,然后做出决定。
this.customForm.get('location').valueChanges.subscribe(
(value) => {
if (this.predictions.findIndex(value) > -1) {
this.predictionFilled = true; // value exists, then do not make api call
}
else {
this.predictionFilled = false; // make api call
}
this.onChangeLocation(value);
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.