javascript - Google Places Autocomplete + Angular 2 建议未显示

问题描述

我正在通过 AGM 库使用 Google 地方自动完成功能。

这是我的组件 HTML 中用于搜索的输入。

 <form #addressForm="ngForm" novalidate name="AddressForm">
    <div class="form-group">
        <label for="Line1">{{ "AddressLine1" | localize }} *</label>
        <input
            id="Line1"
            class="form-control"
            required
            #search
            #line1Input="ngModel"
            type="text"
            placeholder = "{{'Line1Placeholder'| localize}}"
            name="Line1"
            [(ngModel)]="address.line1"
            maxlength="128"
            (change)="checkValidity()"
        />
        <validation-messages [formCtrl]="line1Input"></validation-messages>
</form>

这是我的组件 ts 代码

    export class EditMainAddressComponent extends AppComponentBase
    implements ControlValueAccessor, AfterContentChecked, OnInit {
    @ViewChild('addressForm') addressForm;
    @ViewChild('search') public searchElement: ElementRef;
    required: string | boolean;

    private changed = [];
    private touched = [];

    disabled: boolean;
    address: AddressDto = new AddressDto();
    addressTypes: SelectItem[] = [];
    lat: any;
    lng: any;

    constructor(injector: Injector, private mapsApiLoader: MapsAPILoader, private ngZone: NgZone) {
        super(injector);
        this.addressTypes.push({ label: this.l('Address.Main'), value: AddressType.Main });
        this.addressTypes.push({ label: this.l('Address.Billing'), value: AddressType.Billing });
        this.addressTypes.push({ label: this.l('Address.Delivery'), value: AddressType.Delivery });
        this.addressTypes.push({ label: this.l('Address.Correspondence'), value: AddressType.Correspondence });
    }

    ngAfterContentChecked(): void {
        this.checkValidity();
    }

    checkValidity(): void {}

    get value(): AddressDto {
        return this.address;
    }

    set value(value: AddressDto) {
        if (this.address !== value) {
            this.address = value;
            this.address.latitude = this.lat;
            this.address.longitude = this.lng;
            this.changed.forEach(f => f(value));
        }
    }

    registerOnChange(fn: any): void {
        this.changed.push(fn);
    }

    registerOnTouched(fn: any): void {
        this.touched.push(fn);
    }

    setDisabledState(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }

    writeValue(obj: AddressDto): void {
        if (obj) {
            this.address = obj;
            this.checkValidity();
        }
    }

    validate(): ValidationErrors {
        if (!this.addressForm.valid) {
            return { message: 'custom error' };
        }
        return null;
    }

    registerOnValidatorChange(fn: () => void): void {
        this.checkValidity = fn;
    }

    ngOnInit(): void {
        this.mapsApiLoader.load().then(() => {
            const autocomplete = new google.maps.places.Autocomplete(
                this.searchElement.nativeElement as HTMLInputElement,
                {
                    types: ['address'],
                }
            );
            autocomplete.addListener('place_changed', () => {
                this.ngZone.run(() => {
                    const place: google.maps.places.PlaceResult = autocomplete.getPlace();

                    if (place.geometry === undefined || place.geometry == null) {
                        return;
                    }
                });
            });
        });
    }
}

我的问题是，我收到了名额，但没有看到下拉菜单。

我在源选项卡中有响应

[ [ "Kings Highway, Brooklyn, NY, USA", null, ["route", "geocode"], "EiBLaW5ncyBIaWdod2F5LCBCcm9va2x5biwgTlksIFVTQSIuKiwKFAoSCZuweFtLW8KJEchDl-1agp_wEhQKEgkJIXyUFkTCiRGGeAAEdFx2gg", "11327283b8eb9070c49203e08cad1a2c4ebe4fe1", [["Kings Highway", 0], ["Brooklyn", 15], ["NY", 25], ["USA", 29]], [[0, 1]], null, "EiBLaW5ncyBIaWdod2F5LCBCcm9va2x5biwgTlksIFVTQSIuKiwKFAoSCZuweFtLW8KJEchDl-1agp_wEhQKEgkJIXyUFkTCiRGGeAAAEdFx2Brookingly", [KNY," [[0, 1]]] ],

哪里可能有问题？

标签： javascriptangulartypescriptgoogle-maps

javascript - Google Places Autocomplete + Angular 2 建议未显示

问题描述

解决方案

推荐阅读