Как получить значение динамического тега p в angular 4?
Я использую angularjs для своего сайта. Где я хочу получить значение тега p, которое динамически поступает из api. Для этого я использовал jQuery в файле .ts. Это $('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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я предлагаю вам удалить jQuery, а затем передать функции getCities параметр события mouseover, чтобы вы могли принять значение p с помощью event.target.innerText prop!
[РЕДАКТИРОВАТЬ]
Например.
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.
Проверьте здесь свойства события;
Проверьте здесь $ event функциональность angular.
Это потому, что вы используете $('p.s') в качестве селектора, который применяется ко всем вашим тегам <p>. Вам нужно указать идентификаторы для ваших p.
Получена ошибка в консоли compiler.js: 485 Неперехваченная ошибка: ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: получена интерполяция ({{}}), где ожидалось выражение в столбце 10 в [getCities ({{$ index}})] в ng: / //AppModule/LocationComponent.html @ 28:27
mhh, тогда я думаю, было бы лучше реализовать функцию getCities() в вашем angularjs-контроллере, таком как $scope.getCities (). А затем используйте ng-mouseover = "getCities ($index)" на своем <p>.
Я использую angular 4 .. как это написать?
извините, я думал, что это вопрос angularjs.
Вместо того, чтобы добавлять jQuery на свой веб-сайт, вы должны получить html от event.target и изменить привязку события наведения мыши к getCities($event).
(подробнее об этом здесь)
также это: $('.s')выбирает все элементы с помощью класса css s
Решение должно выглядеть так: (выдержка)
html
<p (mouseover) = "getCities($event)" class = "s" >{{state.StateName}}</p>
ts
getCities(event) {
var statev = event.target.textContent
// api call etc
}
РЕДАКТИРОВАТЬ :Пример Plunker
Получена ошибка в разделе «Невозможно прочитать свойство target», равное undefined. Есть ли что-нибудь добавить в app.module.ts для target?
$event в качестве аргумента к getCities (в html)?
Да, я тоже добавил это в HTML
обновил плункер со всем запущенным (я использовал fetch для HTTP-запросов, обычно я бы использовал angular httpclient внутри служб, но это не по теме)
На самом деле я новичок в бэкэнде, поэтому не знаю, как передать параметр.