Angular点击用户按钮页面不显示用户名问题求助

核心问题在于子组件传递的数据类型与父组件的预期不匹配，导致用户匹配逻辑失效：

1. 数据传递错误
   在users.component.ts的onSelectedUser方法中，你通过EventEmitter发射的是用户名称（this.user.name），但app.component.ts的onSelectUser方法将这个值赋值给了selectedUserId——父组件期望接收的是用户ID，实际却收到了用户名。

2. 匹配逻辑失效
   selectedUser getter通过this.users.find((user) => user.id === this.selectedUserId)查找用户，此时selectedUserId存储的是用户名，和用户数组里的user.id完全不匹配，因此返回undefined。页面的@if(selectedUser)条件不满足，只会显示else分支的内容。

修复方法 #

修改users.component.ts中的onSelectedUser方法，将发射的内容从用户名改为用户ID：

onSelectedUser(){
  this.select.emit(this.user.id);
}

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