J'ai un problème avec l'affichage des informations sur ma page html, j'envoie un objet depuis "home-page.ts" vers "informacion-bar.page.ts" puis je les montre sur html avec {{res ?. title}} qui fonctionne sur mes autres projets mais je ne sais pas pourquoi maintenant cela ne fonctionne pas alors j'ai besoin d'un peu d'aide
Désolé pour mon anglais de bas niveau
Ici, j'ai mon fichier dactylographié où j'obtiens le data et attribuez la valeur à "res" et ne l'utilisez pas sur mon html
Voici mon html où vous pouvez le voir très simple en utilisant des composants ioniques et en essayant d'afficher des informations
Et ma console qui montre l'objet avec la propriété "title" et "snippet"
la console ne m'envoie aucune erreur juste un petit avertissement "Navigation déclenchée en dehors de la zone angulaire, avez-vous oublié d'appeler 'ngZone.run ( ) '? " que j'ignore et que mon résultat affiche "Information: ''" juste vide et l'étiquette est vide aussi
TS
{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
HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label>
test: {{ res?.snippet }}
</ion-label>
</ion-item>
</ion-list>
</ion-content>
Console:
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() {
}
}
3 Réponses :
Vous devriez plutôt faire de la res une observable dans le rappel en important d'abord
{{ (res | async)?.propertyname }}
puis
this.events2.subscribe('my-message', (data) => {
this.res = of(data);
//
});
puis l'afficher comme
import { Observable, of} from 'rxjs';
Je suppose que vous utilisez ionic 4. Dans les versions précédentes, les observables sont importés différemment.
Est-ce que quelque chose est affiché si vous utilisez {{res | async}} à la place?
si je fais this.res = this.event2 alors res me renvoie un "événement" pas l'objet avec les données et j'ai essayé {{res | async}} et rien de la console ne me montre aucune erreur mais il est vide
Oui, je n'ai pas vu l'événement, je modifierai ma réponse
n'affiche toujours rien
J'ai rencontré le même problème, je l'ai résolu en utilisant NgZone de @ angular / core. Je ne sais pas si c'est le meilleur moyen, mais cela a fonctionné pour moi.
this.events2.subscribe('my-message', (data) => {
this.zone.run(() => {
this.res = data;
})
});
ajoutez-le dans le constructeur:
constructor(private zone: NgZone) {}
encapsule le code à l'intérieur de la zone comme ceci:
import {NgZone} from '@angular/core';
contenu toujours vide mais au moins cela résout cet avertissement mais cela ne fonctionne toujours pas
RESOLU je l'ai résolu grâce à ceci angularjs - events-publish-subscribe
Dans le CV, vous devez charger et préparer l'abonnement sur 'page2' avant d'envoyer les données de la page1, vous devez donc vous abonner avant de publier, puis vous pouvez passer à page2, abonnez-vous puis publiez les données de la page1 je vous laisse un exemple
page 1: accédez à la page2, chargez son constructeur PUIS "publier"
this.events1.subscribe('posicion_usuario', (pos) => {
this.lat = pos.lat;
this.lng = pos.lng;
});
}
}
page 2: chargez la page2 et abonnez-vous AVANT de publier, puis vous chargez cet abonnement et ALORS vous publiez les données comme je vous le montre sur le dernier code
enviarPosicion() {
this.zone.run(() => {
this.nav.navigateForward('/lista-bares').then(() => {
this.events1.publish('posicion_usuario', this.posicion);
});
});
l'abonnement de la page 2 doit être sur le constructeur, il se charge donc lorsque vous accédez à la page 2.
Veuillez éviter de poster des images là où cela n'est pas nécessaire: postez votre code tel quel , sinon il sera assez difficile de vous aider correctement.
ok merci pour le conseil