Не удается прочитать свойство 'title' из undefined в Object.eval [как updateRenderer]

Question

Я пытаюсь получить детали одного поста, но я продолжаю получать эту ошибку; ОШИБКА TypeError: Невозможно прочитать свойство 'title' из неопределенного в Object.eval [как updateRenderer]. Хотя данные получены правильно в console.log, но они не отображаются на самой странице. когда я делаю {{post? .title}}, ошибка исчезает, но результаты по-прежнему не отображаются на странице, а отображаются правильно в console.log

Ionic Framework: v4 Платформа ОС: Windows 10

post.service

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}`);
  }

post.page.ts

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;
    });
  }
}

post.page.html

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

вывод console.log

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"

снимок экрана console.log: Снимок экрана ответа console.log

Answer 1

Попробуйте это:

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

Answer 2

согласно тому, что @sebaferreras указал в console.log(result), я сделал это вместо этого;

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

Answer 3

На основании изображения console.log(result) кажется, что ответ выглядит примерно так:

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

Так что вам нужно присвоить свой loadedPost так:

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

А затем покажите заголовок так:

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

Обратите внимание, что ? в {{ loadedPost?.title }} необходим, поскольку свойство loadedPost назначается асинхронным методом, поэтому сначала будет undefined, пока API не вернет ответ.

Answer 4

У меня есть другое решение с asyc, попробуйте это:

в TS

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)
  }
}

в HTML

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