1
votes

Impossible de lire la propriété 'title' de undefined dans Object.eval [as updateRenderer]

J'essaye d'obtenir les détails d'un seul article mais j'obtiens toujours cette erreur; ERREUR TypeError: impossible de lire la propriété 'title' de undefined dans Object.eval [as updateRenderer]. Bien que les données soient correctement obtenues dans console.log mais ne s'affichent pas sur la page elle-même. quand je fais {{post? .title}}, l'erreur disparaît mais les résultats n'apparaissent toujours pas sur la page mais s'affichent correctement dans console.log

Ionic Framework: v4 Plate-forme du système d'exploitation: Windows 10

post.service

post:
author_id: 0
body: "<p>This is the body of the lorem ipsum post</p>"
category_id: null
created_at: "2019-06-13 17:08:45"
excerpt: "This is the excerpt for the Lorem Ipsum Post"
featured: 0
id: 1
image: "posts/post1.jpg"
meta_description: "This is the meta description"
meta_keywords: "keyword1, keyword2, keyword3"
seo_title: null
slug: "lorem-ipsum-post"
status: "PUBLISHED"
title: "Lorem Ipsum Post"

post.page.ts

<ion-card-header>
  <ion-card-title text-center>{{loadedPost.title}}</ion-card-title>
</ion-card-header>

post.page.html

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostService } from '../post.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.page.html',
  styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
  loadedPost: any;

  constructor(private activatedRoute: ActivatedRoute, private postService: PostService) { }

  ngOnInit() {
    const postId = this.activatedRoute.snapshot.paramMap.get('postId');

    this.postService.getPost(postId).subscribe(result => {
      console.log('details: ', result);
      this.loadedPost = result;
    });
  }
}

Sortie console.log

getAllPosts(): Observable<any> {
    return this.http.get(`${this.url}`).pipe(
      map(results => {
        console.log('Raw: ', results);
        return results['posts'];
      })
    );
  }

  getPost(postId: string) {
    return this.http.get(`${this.url}/${postId}`);
  }

capture d'écran de console.log: Capture d'écran de la réponse console.log

angular ionic-framework

3 commentaires

Pourriez-vous s'il vous plaît essayer en injectant des zones dans votre constructeur comme ceci: constructor (private ngZone: NgZone, ...) {} puis en faisant this.ngZone.run (() => { this.loadedPost = résultat;}) ? Si cela fonctionne, j'ajouterai une réponse fournissant plus d'informations.

ça n'a pas marché non plus

Je pense avoir trouvé le problème, veuillez vérifier ma réponse ci-dessous

5 Réponses :

1
votes

Essayez ceci:

<ion-card-header>
  <ion-card-title text-center>{{loadedPost && loadedPost.title}}</ion-card-title>
</ion-card-header>

2 commentaires

C'est exactement la même chose que de faire {{sharedPost? .Title}} qui ne change rien par rapport à ce qui est expliqué dans l'OP.

avec {{sharedPost? .title}} l'erreur disparaît mais le titre n'est pas affiché sur la page

0
votes

J'ai une autre solution avec asyc, essayez ceci:

en TS

<ion-card-header>
  <ion-card-title text-center>{{(loadedPost$ | async)?.title}}</ion-card-title>
</ion-card-header>

en HTML

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostService } from '../post.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-post',
  templateUrl: './post.page.html',
  styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
  loadedPost$: Observable<any>;

  constructor(private activatedRoute: ActivatedRoute, private postService: PostService) { }

  ngOnInit() {
    const postId = this.activatedRoute.snapshot.paramMap.get('postId');

    this.loadedPost$ = this.postService.getPost(postId)
  }
}

p >

3 commentaires

@captain êtes-vous absolument sûr que la réponse a une propriété title au niveau supérieur de l'objet? Pourriez-vous s'il vous plaît ajouter à votre question la sortie de console.log (résultat) ? Cette réponse devrait fonctionner à moins que nous manquions quelque chose d'autre ...

@captain, pour le débogueur, mettez ceci {{sharedPost $ | async | json}} en HTML, montre-nous le résultat

je viens de mettre le résultat du journal de la console dans la question

6
votes

D'après l'image de console.log (résultat) , il semble que la réponse ressemble à ceci:

<ion-card-header>
  <ion-card-title text-center>{{ loadedPost?.title }}</ion-card-title>
</ion-card-header>

Vous devez donc attribuer votre sharedPost comme ceci:

  // ...
  this.postService.getPost(postId).subscribe((result: any) => {
    console.log('post: ', result.post);
    this.loadedPost = result.post; // <----- I've changed this!
  });

Et puis afficher le titre comme ceci:

{
  "post": {
    "title": "..."
  }
}

S'il vous plaît notez que le ? dans {{sharedPost? .title}} est nécessaire car la propriété sharedPost est attribuée par une méthode asynchrone. être indéfini dans un premier temps jusqu'à ce que l'API renvoie la réponse.

4 commentaires

Merci beaucoup! ... cela n'a pas vraiment fonctionné mais cela m'a mis dans la direction ... Je vais montrer ce que j'ai fait ci-dessous ...

Heureux d'entendre que cela a aidé @captain. Puis-je demander pourquoi cela n'a pas fonctionné?

quand je fais result.post cela donne cette erreur ... La propriété 'post' n'existe pas sur le type 'Object'.

Oh, je vois ... Ok, j'ai quand même mis à jour la réponse pour corriger cette erreur de typographie .subscribe ((result: any) => {...} ; :)

0
votes

selon ce que @sebaferreras a souligné dans le console.log (résultat) , je l'ai fait à la place;

<ion-card-header>
  <ion-card-title text-center>{{loadedPost?.post.title}}</ion-card-title>
</ion-card-header>

0 commentaires

0
votes

Vous pouvez utiliser opérateur de navigation sécurisée dans votre html fichier, comme ceci: {{sharedPost? .title}} ou utilisez ngIf pour vérifier si sharedPost est initialisé:

<ion-card-header *ngIf="loadedPost">
  <ion-card-title text-center>
    {{loadedPost.title}}
  </ion-card-title>
</ion-card-header>

0 commentaires