IONIC / Angular: HTML не отображает информацию из файла TS

Question

У меня проблема с отображением информации на моей html-странице. Я отправляю объект из "home-page.ts" в "informacion-bar.page.ts", затем я показываю их на html с {{res ?.title}}, который работает над моими другими проектами, но я не знаю, почему сейчас это не работает, поэтому мне нужна небольшая помощь

Извините за мой низкий уровень английского

Здесь у меня есть файл с машинописным текстом, где яполучить данные и присвоить значение «res» и плохо использовать его на моем HTML

Вот мой HTML, где вы можете увидеть его очень просто с помощью ионных компонентов и пытается показать информацию

Имоя консоль, которая показывает объект со свойствами "title" и "snippet"

console не отправляет мне никаких ошибок, только небольшое предупреждение "Навигация сработала за пределами угловой зоны, вы забыли вызвать 'ngZone.run ()«?»что я игнорирую, и мой результат показывает "Информация: ''" просто пустым, а ярлык тоже пустым

TS

export class InformacionBarPage implements OnInit {
  public res: any;
  constructor(public events2: Events) {
    this.events2.subscribe('my-message', (data) => {
      this.res = data;
      console.log(this.res);
      console.log(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

Answer 1

решено я решил это благодаря этому angularjs - events-publish-subscribe

В резюме вам необходимо загрузить и подготовить подписку на «страницу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.

Answer 2

Я столкнулся с той же проблемой, я решил ее с помощью NgZone из @ angular / core.Не знаю, если это лучший способ, но он работал для меня.

import {NgZone} from '@angular/core';

добавьте его в конструктор:

constructor(private zone: NgZone) {}

оберните код внутри зоны следующим образом:

this.events2.subscribe('my-message', (data) => {
  this.zone.run(() => {
    this.res = data;
  })
});

Answer 3

Вместо этого вы должны сделать res наблюдаемым в обратном вызове, сначала импортировав

import { Observable, of} from 'rxjs';

, а затем

this.events2.subscribe('my-message', (data) => {
  this.res = of(data);
  //
});

, а затем просмотреть его как

{{ (res | async)?.propertyname }}

Я предполагаю, что вы используете ionic 4. В предыдущих версиях Observables импортируются по-разному.