Javascript Google Places Autocomplete+Angular 2建议未显示

我正在通过AGM库使用Google places autocomplete

这里是我的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>

我的问题是，我收到的地方，但我没有看到下降

我在“源”选项卡中有响应

[ [ 美国纽约州布鲁克林国王大道， 无效的 [路线、地理编码]， EIBLAW5NCYBIAWDOD2F5LCBCCM9VA2X5BIWGTLKSIFTQSIUKIWKFAOSCZUWEFTLW8KJECHDL-1agp_wehqkegkjixyufktcirgeAEDFX2GG， 11327283b8eb9070c49203e08cad1a2c4ebe4fe1， [Kings Highway，0]，[Brooklyn，15]，[NY，25]，[USA，29]， [[0, 1]], 无效的 EIBLAW5NCYBIAWDOD2F5LCBCCM9VA2X5BIWGTLKSIFTQSIUKIWKFAOSCZUWEFTLW8KJECHDL-1agp_wehqkegkjixyufktcirgeAEDFX2GG， [美国纽约布鲁克林国王大道，[[0,1]] ],

---

哪里会有问题？

所以我们有.pac容器样式，它的z-index小于modal z-index。例如，将z-index设置为9999999会有帮助

请添加工作示例我无法添加工作示例，因为google api键。我添加了所有需要的代码@Piyushu谢谢你救了我

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