谷歌位置自动完成+角度2建议没有显示

Question

我通过AGM库使用Google places自动完成。

这是我的组件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"，无效的["路由"，"地理编码"]，"EiBLaW5ncyBIaWdod2F2F5LCcm9va2x5biwgTlksIFVTQSIuKiwKFAoSCzuweFtLW8KJEchDl-1agp_wEhQKEgkJIXyUFkTCiRGGeAAEdFx2gg"，"11327283b8eb9070c49203e08cad1a2c4be4fe1"，[["国王高速公路"，0]，["布鲁克林"，15]，["纽约"，25]，[美国"，29]]，[[0,1]]，无效的"EiBLaW5ncyBIaWdod2F2F5LCcm9va2x5biwgTlksIFVTQSIuKiwKFAoSCzuweFtLW8KJEchDl-1agp_wEhQKEgkJIXyUFkTCiRGGeAAEdFx2gg"，["国王高速公路"，"布鲁克林，纽约，美国"，[[0，1]]]]，

哪里会有问题？

Answer 1

所以模态命题具有.pac-container风格，z-index比模态z-index少。例如，将z-index设置为99999999有助于