Question

我正在尝试获取单个帖子的详细信息，但我一直收到此错误；错误TypeError：无法读取Object.eval上未定义的属性“ title”（作为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

Answer 1

尝试一下：

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

Answer 2

我有另一种使用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 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属性是由异步方法分配的，因此在API返回之前，它将首先为undefined响应。

Answer 4

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

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

Answer 5

您可能想要在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>

无法读取Object.eval上未定义的属性“ title”（作为updateRenderer）

5 个答案: