悬停在相应元素上时更改标记颜色-> Angular 4答案

【问题标题】：Changing the marker color when hovering on corresponding element -> Angular 4悬停在相应元素上时更改标记颜色-> Angular 4
【发布时间】：2018-04-14 14:59:59
【问题描述】：

当我将鼠标悬停在不同组件中的一个元素上时，我正在尝试动态更改谷歌标记的颜色。我还在学习 Angular，我尝试使用 Observables 但没有任何成功。

我有存储所有卡片的main.view 组件（我称它们为事件）。这是main-view.component.ts代码的一部分：

constructor( private eventService: EventsDataService) {
    }
      ngOnInit() {
        this.getEvents();
      }

我正在注入从服务器获取我的卡片数据的服务，并使用 getEvents 方法使用 Observable 将其转换为 JSON 数据。然后我在 html 模板中使用 2 个 *ngFor 指令来迭代这些数据并填充卡片和标记。这是代码：

main-view.component.html

 <app-event-card *ngFor="let event of events; let i = index"></app-event-card>
  </section>
  <aside class="mapContainer"  [class.fixed]="fixed">
      <agm-map [class.fixed]="fixed"  [latitude]= "latitude"  [longitude]="longitude" >
        <agm-marker *ngFor="let event of events; let i = index"
        [latitude]= "event.location.coordinates[0]"
        [longitude]="event.location.coordinates[1]"
        label="{{event.price +'AUD'}}">
      </agm-marker>
      </agm-map>
  </aside>

现在，当我将鼠标悬停在与标记对应的一张卡片上时，我想更改标记的颜色或任何属性，但我不知道如何连接这两个组件的数据。

我将不胜感激有关此问题的任何帮助或提示。

谢谢

【问题讨论】：

标签： angular hover

【解决方案1】：

地图外的标记列表

<ul><li *ngFor="let data of markers" (mouseenter)="updateColor(data.lat)" (mouseleave)="updateColorR(data.lat)">{{data.lat}}</li></ul>

标记

  <agm-marker 
  *ngFor="let m of markers; let i = index"
  (markerClick)="clickedMarker(m.label, i)"
  [latitude]="m.lat"
  [longitude]="m.lng"
  [markerDraggable]="m.draggable"
  [iconUrl]="m.icon"
  (dragEnd)="markerDragEnd(m, $event)">

组件

updateColor(data:any){
this.markers.map((el,i)=>{
  if(el.lat==data){
    this.markers[i].icon='https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|4286f4';

  }
})
}
updateColorR(data:any){
this.markers.map((el,i)=>{
  if(el.lat==data){
    this.markers[i].icon='https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000';

  }
})
}

stackblitz演示

【讨论】：

【解决方案2】：

我不知道你的组件是什么样子，但你只需要这样的东西：

<app-event-card (mouseenter)="event.hovered = true" (mouseleave)="event.hovered = false" *ngFor="let event of events; let i = index"></app-event-card>

<aside ...>
  <agm-map ...>
    <agm-marker *ngFor="let event of events; let i = index"
      ...
      [color]="event.hovered ? 'blue' : 'red'">
    </agm-marker>
  </agm-map>
</aside>

Demo

【讨论】：

虽然这是一个旧答案：现在不正确，过去也不正确。 agm-marker 的 api 中从来没有颜色输入。