@在angular 7中具有多个自动完成ID的Viewchild
我试图从viewchild显示这两个ID,但实际上只显示其中一个。我试图在同一页上为agm google maps显示两个不同的自动完成输入,一个是地图的实际输入,另一个只是地址搜索输入 html@在angular 7中具有多个自动完成ID的Viewchild,angular,Angular,我试图从viewchild显示这两个ID,但实际上只显示其中一个。我试图在同一页上为agm google maps显示两个不同的自动完成输入,一个是地图的实际输入,另一个只是地址搜索输入 html 如果您显示代码,那么帮助社区添加html和ts代码将非常有帮助 @ViewChild('search1', {static: false}) @ViewChild('search', {static: false}) <div class="col-md-5"> <div cl
如果您显示代码,那么帮助社区添加html和ts代码将非常有帮助
@ViewChild('search1', {static: false})
@ViewChild('search', {static: false})
<div class="col-md-5">
<div class="form-group Search-text"> <input type="text" class="form-control border-btm" id="place" #search [formControl]="searchControl" placeholder="physical address">
</div>
</div>
<div class="form-group Search-text">
<input type="text" class="form-control border-btm" id="auto-place" #search1 [formControl]="searchControl"placeholder="physical address">
</div>
@ViewChild('search1', {static: false})
@ViewChild('search', {static: false})
ngOnInit() {
// set google maps defaults
this.zoom = 16;
this.latitude = -26.051738;
this.longitude = 28.0244903;
// create search FormControl
this.searchControl = new FormControl();
// set current position
this.setCurrentPosition();
// load Places Autocomplete
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(
this.searchElementRef.nativeElement,
{
types: [],
componentRestrictions: { country: 'ZA' }
}
);
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
// verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
// set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 16;
});
});
});
}
private setCurrentPosition() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 8;
});
}
}