Ionic + Angular2 google 映射层事件监听模型绑定

Question

我有一张用标记初始化的地图。每当我点击一个标记时，我都想更新 Ngmodel。最终这应该反映在离子搜索栏中。每当视图加载时，我都会调用 initMap() 来加载地图以及此侦听器：

google.maps.event.addListener(layer, 'click', function(e) {
      this.searchValue = e.row['name'].value;
});

在我的模板中：

<ion-searchbar [(ngModel)]="searchValue"></ion-searchbar>

每当我在声明中为 searchValue 设置一个值时，它就会显示在离子搜索栏中，但在单击标记后不会显示。标记点击事件确实有效，因为如果我控制台日志 e.row['name'].value ，我得到正确的值，它似乎没有绑定。

Answer 1

尝试导入 NgZone 并使用它的 run()-method, to explicitly make the code run inside Angulars zone, and also trigger change detection afterwards. Also change function(e){...} to (e) => {}，它不绑定 this。

import { Component, NgZone } from '@angular/core';

@Component({
    ...
})
export class SomeComponent{
    someValue: string;

    constructor(private zone: NgZone){}

    initMap(){
        ...
        google.maps.event.addListener(layer, 'click', (e) => {
            this.zone.run(() => {  
                this.searchValue = e.row['name'].value;
            });
        });
    }

    ...
}

Ionic + Angular2 google 映射层事件监听模型绑定

Ionic + Angular2 google maps layer event listener model binding

javascript

google-maps-api-3

ionic-framework

angular-ngmodel

angular