Question

我在我的网站上使用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;


    })  
  }

以下是我的html代码

<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>

Answer 1

您应该从event.target获取html并修改您的鼠标悬停事件绑定到getCities($event)，而不是将jQuery添加到您的网站（更多关于它here）

也是这样的：$('.s') selects all the elements with the s css class

解决方案应如下所示:(提取）

<强> HTML

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

<强> TS

getCities(event) {
  var statev = event.target.textContent
  // api call etc
}

编辑： Plunker example

Answer 2

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

[编辑]

E.g。

HTML：

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

$event是一个保留变量，表示事件已触发（如MouseOver事件）。

然后，我们需要更改.ts文件并检索事件变量，这样我们就可以得到触发段落的文本。

TS：

getCities(event: MouseEvent){
  var statev = (<HTMLParagraphElement>event.target).innerText;
  this.httpclient.post('http://blalbla/api/Cities?Statename='+statev,'').subscribe((result:any) => {
     this.cities = result;
  })  
}

现在我们添加了一个事件参数，它是一个MouseEvent类型，我们的statev变量是从一个HTML段落元素触发的事件中得到的，它是innerText属性。

检查here事件的属性;

检查here角度的$ event功能。

Answer 3

这是因为您使用$('p.s')作为选择器，适用于您的所有<p>代码。你需要给你的朋友提供id。

如何在角度4中获得动态p标签的值？

3 个答案: