时间戳

首页 > 解决方案 > 异步调用后数据未呈现在 html 文件中

arrays - 异步调用后数据未呈现在 html 文件中

问题描述

我正在调用一个 api，它返回有关单个博客文章的响应数据。但它没有在 html 页面中呈现。此代码返回一个控制台错误，如

错误类型错误：无法读取 Object.updateRenderer 处未定义的属性“渲染”（post.component.html:3）

但我尝试使用safe-navigationlikeblogpost?.content.rendered和blogpost?.content?.rendered，两者都没有引发任何控制台错误，但也没有呈现数据。我在这里做错了什么？

在这两种情况下，{{blogpost | json}}这都有效，但innerHTML不起作用

服务

getPost(slug: string): Observable<PostRawModel> {
  const url = 'https://blog.varanjith.com/wp-json/wp/v2/posts?slug=' + slug;
  return this.http.get<PostRawModel>(url);
}

控制器

export class PostComponent implements OnInit {
  post$: Observable<PostRawModel>;
  constructor(private route: ActivatedRoute, private blogService: BlogService) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
        this.post$ = this.blogService.getPost(params.get('slug'));
    });
  }
}

看法

<div *ngIf="(post$ | async) as blogpost">
  {{blogpost | json}}
  <div [innerHTML]="blogpost.content.rendered"></div>
</div>

更新#1

我没有粘贴 json 数据，因为它会使这篇文章变得一团糟，所以请点击链接查看 json 数据。https://blog.varanjith.com/wp-json/wp/v2/posts?slug=merging-two-observables-using-forkjoin

更新#2

我现在正在创建一个 stackblitz，将使用正在运行的代码更新这个问题。

标签： arraysangulartypescript

解决方案

blogpost是一个数组，要访问其中的对象，您需要使用适当的索引：

blogpost[0].content.rendered

推荐阅读