Angular6 CRUD应用OnInit阶段用户列表无法显示问题排查

我一眼就揪出了问题的根源——你的ApiService里的getAllUsers方法处理后端响应的逻辑错了，这直接导致了原有用户数据无法在UI上渲染！

错误原因拆解 #

当后端返回用户列表时，它本身就是一个数组格式（比如[{id:1, userName:'张三'}, {id:2, userName:'李四'}]），但你在map操作里做了这步多余的包裹：

var users = [response];

这相当于把后端返回的一维数组硬生生套成了二维数组（变成[[{id:1,...}, {id:2,...}]]）。之后你调用users.map((user)=> new User(user))，本质是把外层的整个数组当成单个用户去实例化User对象，最终得到的users数组里只有一个无效的“用户”（实际是原数组）。

这种情况下，AppComponent里的this.users是一个包含无效元素的数组，*ngFor遍历的时候找不到正确的id、userName属性，自然就看不到原有数据；而新增用户时，你用concat添加的是正常的单个User对象，数组结构没问题，所以能正常显示。

修复代码 #

直接修改ApiService的getAllUsers方法，去掉多余的数组包裹：

public getAllUsers(): Observable<User[]> {
  return this.http
    .get(API_URL + '/users').pipe(
      map(response => {
        // 直接把后端返回的数组转成User实例数组，不要额外套层
        return (response as User[]).map(userData => new User(userData));
      }),
      catchError(this.handleError)
    )
}

额外验证点 #

为了确保彻底解决问题，你可以再检查两个地方：

• 确认User类的构造函数能正确接收后端数据并赋值属性，比如：

  export class User {
    id: number;
    userName: string;
  
    constructor(userData?: any) {
      if (userData) {
        this.id = userData.id;
        this.userName = userData.userName;
        // 其他属性按需添加
      }
    }
  }
  

• 确认后端接口返回的是纯用户数组，而不是嵌套在某个对象里（比如{data: [...]}），如果是后者，需要在map里先取出response.data再处理。

效果验证 #

修改后重启应用，ngOnInit里订阅getAllUsers后，this.users就会变成正确的User[]数组，*ngFor就能正常遍历渲染所有原有用户了。

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