AngularJS中如何获取动态生成p标签的悬停元素值？

看起来你在Angular项目里用jQuery操作DOM遇到了典型的问题——全局选择器的方式根本没法精准拿到鼠标悬停的那个元素对应的数据。其实Angular本身就有一套更优雅的方式来处理这种数据绑定和交互场景，完全不需要依赖jQuery。我给你整理一套可行的方案：

核心思路 #

放弃直接操作DOM的jQuery写法，改用Angular的数据绑定+事件绑定，让每个州元素和对应的数据直接关联，鼠标悬停时直接传递当前州的完整数据去请求城市列表。

完整代码示例 #

组件TS代码

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-state-city',
  templateUrl: './state-city.component.html',
  styleUrls: ['./state-city.component.css']
})
export class StateCityComponent implements OnInit {
  states: any[] = [];
  currentCities: any[] = [];
  hoveredState: any = null;

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.getStates();
  }

  getStates() {
    this.httpClient.post('http://blabla/api/States', '').subscribe((result: any) => {
      this.states = result; // 假设API返回的是州对象数组，包含id、name等字段
    });
  }

  loadCitiesOnHover(state: any) {
    this.hoveredState = state;
    // 用当前州的唯一标识（比如id）请求对应城市API
    this.httpClient.post(`http://blabla/api/Cities`, { stateId: state.id }).subscribe((result: any) => {
      this.currentCities = result;
    });
  }
}

HTML模板代码

<!-- 遍历展示所有州，每个州绑定鼠标悬停事件 -->
<div class="state-container">
  <p 
    class="s" 
    *ngFor="let state of states"
    (mouseenter)="loadCitiesOnHover(state)"
  >
    {{ state.name }}
  </p>
</div>

<!-- 展示当前悬停州的城市列表 -->
<div class="city-list" *ngIf="hoveredState && currentCities.length > 0">
  <h4>{{ hoveredState.name }} 下辖城市</h4>
  <ul>
    <li *ngFor="let city of currentCities">
      {{ city.name }}
    </li>
  </ul>
</div>

关键说明 #

1. 为什么之前的jQuery写法不行？
   $('p.s').html()会选中页面上所有class为s的p标签，默认返回第一个元素的内容——不管你悬停哪个州，拿到的永远是第一个p标签的值，根本做不到“精准匹配当前悬停元素”。

2. Angular写法的优势

   • 用*ngFor遍历州数据时，每个p标签都和对应的州对象绑定，鼠标悬停时直接把当前州对象传递给方法，不需要手动去DOM里取值。
   • 完全遵循Angular的变更检测机制，不会出现DOM操作和框架数据不同步的问题。
   • 代码更清晰，数据流向一目了然，后期维护也更简单。

内容的提问来源于stack exchange，提问作者Sagar Kodte