CODEWITHSUNDEEP
javascripthtmlangularionic-framework
M. Scholz
M. Scholz

Reputation: 31

IONIC/Angular: HTML doesnt display information from ts file

Im having a problem with showing the information on my html page im sending an object from a "home-page.ts" to "informacion-bar.page.ts" then i show them on html with {{ res?.title }} that works on my another projects but I dont know why now its not working so I need a little help

Sorry for my low level english

Here i have my typescript file where i get the data and assign the value to "res" and ill use it on my html

Here is my html where you can see its really simple using ionic components and trying to show information

And my console that show the object with the "title" and "snippet" property

console doesnt send me any error just a little warning "Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?" that i ignore and my result is showing "Information: ' '" just blank and the label is blank too

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>

Console:

{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

Upvotes: 2

Views: 849

Answers (3)

M. Scholz
M. Scholz

Reputation: 31

SOLVED i solved it thanks to this angularjs - events-publish-subscribe

In resume you need to load and get ready the subscribe on 'page2' before you send data from page1, so you need to subscribe before publish, then you can move to page2, subscribe and then publish data from page1 i'll let you an example

page 1: navigate to page2, load his constructor THEN "publish"

enviarPosicion() {
this.zone.run(() => {
  this.nav.navigateForward('/lista-bares').then(() => {
    this.events1.publish('posicion_usuario', this.posicion);
  });
});

}

page 2: load page2 and subscribe BEFORE publish, then you load this subscribe and THEN you publish the data as i show you on last code

    this.events1.subscribe('posicion_usuario', (pos) => {
    this.lat = pos.lat;
    this.lng = pos.lng;
  });
}

subscribe of page 2 needs to be on constructor so it load when you navigate to page2.

Upvotes: 1

Mohammad Aslam
Mohammad Aslam

Reputation: 250

I have faced the same issue, I resolved it using NgZone from @angular/core. Don't know if it is the best way but it did work for me.

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

add it in constructor :

constructor(private zone: NgZone) {}

wrap the code inside zone like this : 

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

Upvotes: 0

Ranika Nisal
Ranika Nisal

Reputation: 980

You should instead make the res an observable within the call back by first importing 

import { Observable, of} from 'rxjs';

and then 

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

and then view it as

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

I'm assuming you are using ionic 4. In previous versions Observables are imported differently.

Upvotes: 0

Related Questions