首页 > 解决方案 > Angular 2插值在谷歌地图的监听器内不起作用

问题描述

我有一个使用谷歌地图的 Angular 2 项目。地图最初出现。移动地图时,我想获取地图的中心并使用地理编码来获取地址。得到地址后,我想在信息屏幕上显示地址。

@Component({
    templateUrl: '<div #map></div>
        <p>{{info}}</p>'
})
export class MapComponent implement OnInit {
    info = 'initial'
    showInfo = string => {
        console.log(this.string);
        this.info = string;
        console.log(this.string);
    }
    ...
}

我正在使用方法showInfo来帮助我调试这个问题。在 ngOnInit 中,我正在初始化地图。有趣的是,如果我直接从 ngOnInit 调用显示信息,<p>{{info}}</p>浏览器中的文本会发生变化

ngOnInit() {
    ... // let say I'm already initialize the map
    this.showInfo('test this'); // WORKING
}

但是在我将一个听众放入我的地图后,它就停止了工作

ngOnInit() {
    this.map.addListener('center_changed', () => {
         const location = ... // let say I'm already get the location
         this.showInfo(location); // NOT WORKING
    });
}

突然角度 2 插值无法工作并且浏览器中的文本没有改变,console.log()里面showInfo()说变量info已经改变但里面的文本<p>{{info}}</p>没有改变。

标签: javascriptangularweb

解决方案


推荐阅读