Angular中如何关联API获取的作者与对应帖子数据？

没问题，我帮你搞定这个渲染问题！你现在的代码是把所有作者和帖子分开展示，要实现每个作者名称后显示其对应的帖子，核心是把用户数据和对应的帖子关联起来，同时处理好异步请求的时序，避免数据不同步。下面是具体的解决方案：

步骤1：修改组件逻辑，合并请求并关联数据 #

原来的代码是分别订阅用户和帖子的请求，这样无法保证两个数据同时就绪，也没有建立用户和帖子的关联。我们可以用forkJoin来合并两个Observable，等两个请求都完成后再将用户和对应帖子绑定。

修改home.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // 存储带对应帖子的用户数组
  usersWithPosts: any[] = [];

  constructor(private data: DataService) {}

  ngOnInit(): void {
    // 同时发起用户和帖子请求，等待两者都完成
    forkJoin({
      users: this.data.getuserdetails(),
      posts: this.data.getposts()
    }).subscribe(({ users, posts }) => {
      // 给每个用户匹配对应的帖子（通过userId和user.id关联）
      this.usersWithPosts = users.map(user => ({
        ...user,
        posts: posts.filter(post => post.userId === user.id)
      }));
    });
  }
}

步骤2：修改模板，嵌套循环展示 #

在HTML模板中，先遍历带帖子的用户，再在每个用户下面遍历他的帖子：

修改home.component.html：

<div *ngIf="usersWithPosts.length > 0">
  <!-- 遍历每个用户 -->
  <div *ngFor="let user of usersWithPosts" style="margin-bottom: 20px; padding: 10px; border: 1px solid #eee;">
    <h3>{{ user.name }}</h3>
    <!-- 遍历当前用户的所有帖子 -->
    <div *ngFor="let post of user.posts" style="margin-left: 20px; margin-top: 8px;">
      <p>{{ post.body }}</p>
    </div>
  </div>
</div>

可选优化：简化服务代码 #

你的服务中pipe(map(item => { return item; }))是多余的，因为默认就会返回原数据，可以简化data.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getuserdetails(){
    return this.http.get<any[]>('http://jsonplaceholder.typicode.com/users');
  }

  getposts() {
    return this.http.get<any[]>('http://jsonplaceholder.typicode.com/posts');
  }
}

为什么这样改？ #

• forkJoin确保两个异步请求都完成后再处理数据，避免出现用户已加载但帖子还未就绪的情况；
• 通过map和filter将每个用户与他的帖子关联，给用户对象新增posts属性存储对应帖子；
• 模板中嵌套*ngFor，实现“作者-帖子”的层级展示逻辑。

内容的提问来源于stack exchange，提问作者Ronit