时间戳

首页 > 解决方案 > 在 html 模板中的 json 中查找特定 id 的对象

html - 在 html 模板中的 json 中查找特定 id 的对象

问题描述

我正在写我呈现帖子的页面。

在我的控制器中，我有：

export class PostsComponent implements OnInit {

  posts$: Object;
  users$: Object;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.getPosts().subscribe(
      data => this.posts$ = data
    )
    this.data.getUsers().subscribe(
      data => this.users$ = data
    )
  }

}

在模板中，我遍历帖子以呈现它们：

<h1>Posts</h1>

<ul>
  <li *ngFor='let post of posts$'>
    <h3>{{ post.title }}</h3>
    <h5>created by:</h5>
    <p>{{ post.body }}</p>
  </li>
</ul>

在“创建者：”之后，我想添加post.userId 的用户来自哪里{{user$.username}}（已经在控制器中初始化）。方法和工作正常并从https://jsonplaceholder.typicode.com获取数据。我也写了方法，我想我可以使用那个方法。它应该在控制器中：user$users$getUsersgetPostsgetUser(id)

this.data.getUser(id).subscribe(
  data => this.users$ = data
)

id但是当我遍历模板中的帖子时，我不知道从哪里得到。你能帮我解决这个问题吗？

标签： htmljsonangular

解决方案

您可以getUser(id)在组件中创建一个函数并让它返回用户。

在你的 html

{{ getUser(post.userId) }}.

或者 

this.data.getPosts().subscribe(
  data => { 
   for(let i = 0; i < data.length; i++) {
     data[i].username = this.getUser(data[i].userId);
   }
   this.posts$ = data;
})

推荐阅读