Angular点击事件中循环返回相同响应的问题求助

核心问题 #

1. 数据结构处理错误：你把API返回的完整响应对象推到response数组里，导致response是[{data: [用户列表]}]的嵌套结构，后续循环和点击逻辑都基于错误的结构。
2. 点击事件绑定错误：点击事件绑在了外层循环response的容器上，所有用户共享同一个点击事件，且没有传递当前点击的用户数据。
3. showChat方法逻辑错误：该方法循环打印所有用户，而非当前点击的单个用户数据。

修复后的代码 #

TypeScript 文件

// 可选：定义用户类型增强类型提示
interface User {
  id: string;
  firstName: string;
  picture: string;
  // 按需添加其他字段
}

users: User[] = []; // 直接存储用户数组，避免嵌套

getUsers(){
    this.http.get('https://dummyapi.io/data/v1/user', {
      headers: new HttpHeaders().set('app-id', '63a1a3fdf4c5089b8564caef'),
      params: new HttpParams().set('limit', '50')
    }).subscribe(
      (data: any) => {
        this.users = data.data; // 直接赋值API返回的用户数组
      },
      (error: object) => {
        console.log(error)
      }
    )
}

showChat(user: User){
    console.log('当前点击的用户数据:', user);
    // 这里可添加聊天跳转、详情展示等逻辑
}

HTML 文件

<div class="user-bottom">
    <div class="all-users">
        <!-- 循环用户数组，点击事件绑定到单个用户项并传递当前用户 -->
        <div class="nested-items" *ngFor="let user of users" (click)="showChat(user)">
            <h4>{{user.firstName}}</h4>&nbsp;
            <img [src]="user.picture" alt="profile">
        </div>
    </div>
</div>

修复说明 #

• 数据结构优化：直接将API返回的data.data用户数组赋值给users，去掉不必要的嵌套层级，让循环逻辑更清晰。
• 点击事件调整：把点击事件绑定到每个用户的容器上，点击时传递当前用户对象给showChat，确保触发的是对应用户的逻辑。
• 方法逻辑简化：showChat直接接收点击的用户对象，处理该用户的专属数据，彻底解决点击不同用户显示同一数据的问题。

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