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

【问题标题】：Autocomplete dropdown input selection not triggering ngModelChange自动完成下拉输入选择不会触发 ngModelChange
【发布时间】：2017-09-20 16:00:58
【问题描述】：

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

我将开始输入，它正在传递信息，一旦我选择了一个地址，它就会为我填写其余部分，但不会传递该数据，即使它显示在输入框中。

我正在使用此输入（在子模板中）通过谷歌地图 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？

【问题讨论】：

标签： google-maps angular eventemitter

【解决方案1】：

我修好了，我这样做了：

因此，由于我们使用的是 typescript，所以我更改了 google 的所有内容

function()

到

() =>

那么，在google地图代码的这些功能下

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

【讨论】：