Javascript 如何在angular 4中获取动态p标记的值？

我在我的网站上使用angularjs。在这里，我想得到动态来自api的p标记的值。为此，我在

.ts

文件中使用了jQuery。也就是

$（'p.s'）.html（）。但是我只得到了api方法的第一个响应。未获取悬停元素的值。如何得到这个。因为我想在悬停状态下通过州和城市api显示各个城市

下面是我的
ts
和
html
代码

   getStates(){
    this.httpclient.post('http://blabla/api/States','').subscribe((result:any) => {
      this.states = result;

    })
  }

  getCities(){
      var statev = $('.s').html();
     this.httpclient.post('http://blalbla/api/Cities?Statename='+statev,'').subscribe((result:any) => {
      this.cities = result;


    })  
  }

<div class="other-state">
    <h3>Choose Other Cities</h3>
    <ul>
        <li  class="states-name" *ngFor="let state of states">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Mumbai_03-2016_30_Gateway_of_India.jpg/200px-Mumbai_03-2016_30_Gateway_of_India.jpg" class="citypic">
            <p (mouseover)="getCities()" class="s" >{{state.StateName}}</p>


        </li>
        <div class="hover-city">
                <ul>
                    <li *ngFor="let city of cities">
                        <span>{{city.CityName}}</span>
                    </li>       

                </ul>
        </div>

    </ul>

</div>

下面是我的
html
代码

   getStates(){
    this.httpclient.post('http://blabla/api/States','').subscribe((result:any) => {
      this.states = result;

    })
  }

  getCities(){
      var statev = $('.s').html();
     this.httpclient.post('http://blalbla/api/Cities?Statename='+statev,'').subscribe((result:any) => {
      this.cities = result;


    })  
  }

<div class="other-state">
    <h3>Choose Other Cities</h3>
    <ul>
        <li  class="states-name" *ngFor="let state of states">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Mumbai_03-2016_30_Gateway_of_India.jpg/200px-Mumbai_03-2016_30_Gateway_of_India.jpg" class="citypic">
            <p (mouseover)="getCities()" class="s" >{{state.StateName}}</p>


        </li>
        <div class="hover-city">
                <ul>
                    <li *ngFor="let city of cities">
                        <span>{{city.CityName}}</span>
                    </li>       

                </ul>
        </div>

    </ul>

</div>


选择其他城市


{{{state.StateName}




{{city.CityName}



我建议您删除jQuery，然后在getCities函数中传递mouseover的event参数，这样您就可以使用event.target.innerText prop获取p的值

[编辑]

例如

html:

现在，我们添加了一个事件参数，它是MouseEvent类型，我们的statev变量get来自一个在HTML段落元素上触发的事件innerText属性

检查事件属性

检查angular的$event功能。
这是因为您使用
$（'p.s'）
作为选择器，它适用于所有
标记。您需要为您的用户提供id。
而不是将jQuery添加到您的网站，您应该从
事件中获取html。target
并将鼠标悬停事件绑定到
getCities（$event）
（更多信息）

还有：
$（'.s'）

解决方案应如下所示：（摘录）

html

<p (mouseover)="getCities($event)" class="s" >{{state.StateName}}</p>

编辑：
实际上我是后端初学者，所以我不知道如何传递参数。在控制台编译器中出现错误。js:485未捕获错误：模板解析错误：解析器错误：在[getCities（{{$index}}）的第10列中需要表达式的地方得到插值（{{}}）在ng中：///AppModule/LocationComponent。html@28：27mhh那么我想最好在angularjs控制器中实现
getCities（）
函数，比如
$scope.getCities（）
。然后在你的上使用
ng mouseover=“getCities（$index）”
。我正在使用angular 4。如何编写此文件？抱歉，我认为这是angularjs的问题。无法读取未定义的属性“target”时出错。是否在app.module.ts中为target添加了任何内容？它在这里工作，您是否将
$event
作为参数添加到
getCities
（在html中）？是的，我将它添加到html中，并将plunker与运行的所有内容进行了耦合（我使用
fetch
进行http请求，通常我会在服务内部使用angular的httpclient，但这与主题无关）
getCities(event) {
  var statev = event.target.textContent
  // api call etc
}