gpt4 book ai didi

javascript - 需要在多个输入中添加谷歌自动完成框

转载 作者:行者123 更新时间:2023-11-30 14:14:29 26 4
gpt4 key购买 nike

我需要在数组中的多个输入上添加谷歌自动完成建议。

这是我的示例代码:

<mat-form-field *ngFor="let i of [1,2,3,4,5]" class="example-full-width form-controlNew">
<input matInput autocomplete="off" placeholder="17 Summit Avenue" formControlName="formattedAddress" #search>
</mat-form-field>

应用程序组件.ts

/// <reference types="@types/googlemaps" />
import {
Component,
OnInit,
NgZone,
ElementRef,
ViewChild
} from "@angular/core";

private geocoder;
@ViewChild("search")
public searchElementRef: ElementRef;


ngOnInit() {
setTimeout(() => {
this.setCurrentPosition();
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(
this.searchElementRef.nativeElement,
{
types: ["location"]
}
);
this.geocoder = new google.maps.Geocoder();
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
if (place.geometry === undefined || place.geometry === null) {
return;
}
this.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng();
this.quickjobform.patchValue({
location: {
formattedAddress: place.formatted_address,
zipcode: this.getAddressComponent(place, "postal_code", "long"),
city_sector: this.getAddressComponent(
place,
"sublocality_level_1",
"long"
),
city: this.getAddressComponent(place, "locality", "long"),
country: this.getAddressComponent(place, "country", "long"),
latitude: this.lat,
longitude: this.lng
}
});
this.zoom = 8;
});
});
});
},5000);
}

我遇到了这个错误

TypeError: Unable to get property 'nativeElement' of undefined or null reference TypeError: Unable to get property 'nativeElement' of undefined or null reference at

请检查并帮助我。

最佳答案

您必须访问实现 AfterViewInit 接口(interface)的 ngAfterViewInit() 生命周期钩子(Hook)中的元素

// Import this
import {Component, Directive, Input, ViewChild,AfterViewInit,ElementRef} from '@angular/core';

export class Your_Class implements AfterViewInit {
@ViewChild("search") public searchElementRef: ElementRef;

ngAfterViewInit() {
console.log(this.searchElementRef); // do whatever with element
}
}

Working Stackblitz Example

关于javascript - 需要在多个输入中添加谷歌自动完成框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53814564/

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