属性"coords"在类型"MouseEvent"上不存在.在Angular2-google-maps标记事件中

问题描述

我添加了angular2-google-maps地图的mapClicked事件.代码如下:

I have added mapClicked event of angular2-google-maps map. The code is as below:

mapClicked($event: MouseEvent) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

}

在使用"ionic serve"服务于ionic 2应用程序时，出现编译时错误.

I am getting compile time error while serving my ionic 2 app with "ionic serve".

预先感谢，AB

推荐答案

由于默认的MouseEvent接口没有coords属性，但是由于您使用的是angular2-google-maps，因此您知道coords属性会存在( ng2 google maps MouseEvent接口)，这样您就可以通过仅使用，而不是像这样的MouseEvent:

This is just Typescript complaining since the default MouseEvent interface doesn't have the coords property, but since you're using angular2-google-maps you know the coords property will be there (ng2 google maps MouseEvent interface) so you can avoid that compile time error by just using any instead of MouseEvent like this:

mapClicked($event: any) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

---

编辑

就像 @Bruno Garcia 所指出的那样，解决此问题的一种更好方法将是从AGM库中导入适当的接口.这样，您可以为该MouseEvent事件使用键入和IDE的自动完成功能.

Just like @Bruno Garcia pointed out, a better way to solve this would be to import the proper interface from the AGM library. That way you could use typings and the autocomplete feature of the IDE for that MouseEvent event.

但不是像他在答案中所描述的那样导入MouseEvent，我宁愿使用别名，以避免与默认的MouseEvent接口 混淆. :

But instead of importing the MouseEvent as he described in his answer, I'd prefer to use an alias, to avoid any confusion with the default MouseEvent interface:

import { MouseEvent as AGMMouseEvent } from '@agm/core';

，然后使用该别名:

mapClicked($event: AGMMouseEvent) { ... }

这篇关于属性"coords"在类型"MouseEvent"上不存在.在Angular2-google-maps标记事件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！