无法在 Object.eval [as updateRenderer] 中读取未定义的属性“title”

Question

我正在尝试获取单个帖子的详细信息，但我不断收到此错误； 错误类型错误：无法读取 Object.eval [as updateRenderer] 中未定义的属性“title”。 虽然数据在 console.log 中被正确获取，但它没有显示在页面本身上。 当我执行 {{post?.title}} 时，错误消失了，但结果仍然没有出现在页面上，但在 console.log 中正确显示

离子框架：v4 操作系统平台：Windows 10

售后服务

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

帖子.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

根据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属性是由一个异步方法分配的，所以在API 返回响应之前它首先是undefined的。

Answer 2

尝试这个：

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

Answer 3

我有另一个 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>

Answer 4

根据@sebaferreras 在console.log(result)指出的，我改为这样做；

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

Answer 5

您可能需要使用安全的导航操作在HTML文件中，就像这样{{ loadedPost?.title }}或使用ngIf检查loadedPost初始化：

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

Answer 6

不要忘记在对象属性之前添加 Elvis 运算符 (?)：

加载后？ .title

当对象被异步设置时（即使用 HTTP 请求），这很有用。