Question

当我从下拉列表中选择谷歌地图地址自动完成的结果时，它不会传递给我的父组件，但是当我手动输入地址时它会这样做。

我会开始打字，并且它会传递信息，一旦我选择了一个地址，它就会为我填写其余部分，但是并没有传递这些数据，即使它已经过了＃39 ; s显示在输入框中。

我使用此输入（在子模板中）使用Google地图div获取地址：

<input
  [(ngModel)]="address"
  (ngModelChange)="addressChange.emit($event)"
  id="pac-input"
  name='address'
  class="mapControls"
  type="text"
  placeholder="Enter Address"
>

在我的孩子组件中：

@Component({
  selector: 'gmap',
})

export class gMap{
  @Input() address;
  @Output() addressChange = new EventEmitter();
}

在我的父模板中：

<gmap [(address)]="address"></gmap>

和父组件：

address: string;

显然还有更多的代码，但这是我认为的重要内容。任何人都知道如何做到这一点当我从下拉列表中选择一个自动完成结果时，它会从选择中选择数据触发ngModelChange吗？

Answer 1

我解决了这个问题，我这样做了：

因为我们正在使用打字稿，所以改变了谷歌的所有

function()

到

() =>

然后，根据谷歌地图代码的这些功能

searchBox.addListener('place_changed', () => {
    places.forEach((place) => {

我打电话给发射器

this.addressChange.emit(place.formatted_address);

有一个巨大的延迟，有时像20秒，但它确实有效！

任何人都知道为什么在我选择下拉菜单和发射器关闭之间会有几秒钟的延迟？我真的想删除那个延迟

如果您使用promise对象，那么响应将非常快。

return new Promise((resolve, reject) =>{
  autocomplete.addListener('place_changed', () => {
     var place = autocomplete.getPlace();
     console.log("place "+place);
    resolve(place);
  });
})

自动完成下拉输入选择不会触发ngModelChange

1 个答案: