Angular2中Observable数组无法显示指定用户名问题求助

首先咱们来拆解你遇到的问题：

核心问题：users$是用户数组的Observable，不是单个用户对象 #

你在组件里定义的users$: Observable<Users[]>说明这是一个包含多个User对象的数组流，而不是单个User实例。所以直接访问.username自然拿不到值——数组本身没有这个属性，只有数组里的每一个User对象才有。

次要问题：异步管道的语法错误 #

你写的<p>{{users$ | async).username</p>有括号不匹配的问题，正确的语法应该是(users$ | async)，不过这只是语法小问题，核心还是数组的处理逻辑。

具体解决办法 #

根据你的需求，分两种场景处理：

1. 显示所有用户的用户名

如果要遍历数组里的每一个用户，用*ngFor配合异步管道即可：

<div *ngFor="let user of users$ | async">
  <p>{{ user.username }}</p>
</div>

这样会把数组里每个User的用户名依次渲染出来。

2. 显示单个用户的用户名（比如第一个）

如果只需要显示数组里的某一个用户（比如第一个），可以用数组索引+可选链操作符?.（避免数组为空时触发报错）：

<p>{{ (users$ | async)[0]?.username }}</p>

?.的作用是：当(users$ | async)[0]为空或未定义时，不会继续访问.username，防止抛出Cannot read properties of undefined的错误。

额外排查点：服务方法调用是否匹配 #

你提到服务里的方法是getUsers(): Observable<Users[]>,但组件里写的是this.users$ = this._UserService.get();——这里方法名是不是不匹配？应该调用this._UserService.getUsers()才对，这个细节也可能导致数据没正常加载进来。

辅助调试技巧 #

可以先在模板里用json管道查看返回的数组结构，确认数据是否正确加载：

<pre>{{ users$ | async | json }}</pre>

这样能直观看到数组里的内容，方便你确认数据是否符合预期。

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