IONIC/Angular: HTML не отображает информацию из файла ts
У меня проблема с отображением информации на моей html-странице, я отправляю объект с «home-page.ts» на «informacion-bar.page.ts», затем я показываю их на html с помощью {{ res?.title }} это работает в других моих проектах, но я не знаю, почему сейчас это не работает, поэтому мне нужна небольшая помощь
Извините за мой низкий уровень английского
Здесь у меня есть файл машинописного текста, где я получаю данные и присваиваю значение «res» и плохо использую его в своем html.
Вот мой html, где вы можете увидеть его очень простое использование ионных компонентов и попытку показать информацию
И моя консоль, которая показывает объект со свойством «заголовок» и «фрагмент».
консоль не отправляет мне никаких ошибок, просто небольшое предупреждение «Навигация запущена за пределами зоны Angular, вы забыли вызвать« ngZone.run () »?» который я игнорирую, и мой результат показывает, что «Информация: ' '» просто пуста, и метка тоже пуста
ТС
export class InformacionBarPage implements OnInit {
public res: any;
constructor(public events2: Events) {
this.events2.subscribe('my-message', (data) => {
this.res = data;
console.info(this.res);
console.info(this.res.snippet);
});
}
ngOnInit() {
}
}
HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label>
test: {{ res?.snippet }}
</ion-label>
</ion-item>
</ion-list>
</ion-content>
Приставка:
{position: {…}, title: "Bar de prueba 1", snippet: "Billar, Espacioso, Tranquilo", icon: {…}, animation: undefined, …}
animation: undefined
disableAutoPan: false
draggable: false
flat: false
icon: {url: "assets/imgs/marker_bar.png", size: {…}, anchor: Array(2)}
infoWindowAnchor: (2) [16, 0]
noCache: false
opacity: 1
position: {lng: -6.206721, lat: 36.528835}
rotation: 0
snippet: "Billar, Espacioso, Tranquilo"
title: "Bar de prueba 1"
visible: true
zIndex: 0
__proto__: Object
ок спасибо за совет
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вместо этого вы должны сделать res наблюдаемым в обратном вызове, сначала импортировав
import { Observable, of} from 'rxjs';
а потом
this.events2.subscribe('my-message', (data) => {
this.res = of(data);
//
});
а затем просмотреть его как
{{ (res | async)?.propertyname }}
Я предполагаю, что вы используете ionic 4. В предыдущих версиях Observables импортировались по-разному.
Показывается ли что-нибудь, если вы используете {{ res | асинхронный }} вместо этого?
если я сделаю this.res = this.event2, то res вернет мне «событие», а не объект с данными, и я попробовал {{ res | async }} и ничто в консоли не показывает мне никаких ошибок, но показывает пустое
Да, я не видел там события, я отредактирую свой ответ.
все равно ничего не показывает
Я столкнулся с той же проблемой, я решил ее с помощью NgZone из @angular/core. Не знаю, лучший ли это способ, но он сработал для меня.
import {NgZone} from '@angular/core';
добавьте его в конструктор:
constructor(private zone: NgZone) {}
оберните код внутри зоны следующим образом:
this.events2.subscribe('my-message', (data) => {
this.zone.run(() => {
this.res = data;
})
});
все еще пустой контент, но, по крайней мере, это решает это предупреждение, но оно все еще не работает
РЕШЕНО я решил это благодаря этому angularjs — события-публикация-подписка
В резюме вам нужно загрузить и подготовить подписку на «странице 2», прежде чем отправлять данные со страницы 1, поэтому вам нужно подписаться перед публикацией, затем вы можете перейти на страницу 2, подписаться и затем опубликовать данные со страницы 1. Я дам вам пример
страница 1: перейдите на страницу 2, загрузите его конструктор, ТОГДА "опубликовать"
enviarPosicion() {
this.zone.run(() => {
this.nav.navigateForward('/lista-bares').then(() => {
this.events1.publish('posicion_usuario', this.posicion);
});
});
}
страница 2: загрузите страницу 2 и подпишитесь ПЕРЕД публикацией, затем вы загружаете эту подписку, а ЗАТЕМ вы публикуете данные, как я показываю вам в последнем коде
this.events1.subscribe('posicion_usuario', (pos) => {
this.lat = pos.lat;
this.lng = pos.lng;
});
}
подписка на страницу 2 должна быть в конструкторе, чтобы она загружалась при переходе на страницу 2.
Пожалуйста, не размещайте изображения там, где это не нужно: разместите свой код как есть, иначе вам будет довольно сложно должным образом помочь.