无法读取 Object.eval [as updateRenderer] 处未定义的属性“标题”答案

【问题标题】：Cannot read property 'title' of undefined at Object.eval [as updateRenderer]无法读取 Object.eval [as updateRenderer] 处未定义的属性“标题”
【发布时间】：2019-06-21 08:48:49
【问题描述】：

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

离子框架：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 截图： Screenshot of console.log response

【问题讨论】：

您能否尝试在构造函数中注入区域，如下所示：constructor(private ngZone: NgZone, ...) {}，然后执行this.ngZone.run(() => { this.loadedPost = result; })？如果可行，我将添加一个提供更多信息的答案。
那也没用
我想我已经找到了问题，请在下面查看我的答案

标签： angular ionic-framework

【解决方案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。

【讨论】：

非常感谢！ ...这并不完全有效，但它为我指明了方向...我将在下面展示我所做的...
很高兴听到它帮助了@captain。请问为什么没用？
当我执行result.post 时会出现此错误...Property 'post' does not exist on type 'Object'.
哦，我明白了......好吧，我已经更新了答案以修复那个打字稿错误.subscribe((result: any) => {...}; :)

【解决方案2】：

试试这个：

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

【讨论】：

这与 {{ loadedPost?.title }} 完全相同，与 OP 中解释的内容相比没有任何改变。
与{{loadedPost?.title}} 错误消失但标题未显示在页面上

【解决方案3】：

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

loadedPost?.title

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

【讨论】：

【解决方案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>

【讨论】：

@captain 你确定响应在对象的顶层有一个title 属性吗？您能否将console.log(result) 的输出添加到您的问题中？除非我们遗漏了其他东西，否则这个答案应该可以工作......
@captain，对于调试器，把这个 {{loadedPost$ |异步 | json }} 在 HTML 中，向我们展示结果
我只是将控制台日志结果放在问题中

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您可能希望在 html 文件中使用 safe navigation operator，如下所示：{{ loadedPost?.title }} 或使用 ngIf 检查 loadedPost 是否已初始化：

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

【讨论】：