在 angularjs 中的 onInit() 方法中获取用户详细信息后尝试显示用户详细信息时出现错误

Posted 2023-05-09

【中文标题】在 angularjs 中的 onInit() 方法中获取用户详细信息后尝试显示用户详细信息时出现错误

【英文标题】：I get an error when I try to display the user details after getting them in onInit() method in angularjs

【发布时间】：2021-06-29 15:29:57

【问题描述】：

在 onInit() 方法中请求用户详细信息时，我得到“ERROR TypeError: Cannot read property 'servers' of undefined”。

这是用于显示详细信息的页面的打字稿：

ngOnInit(): void 
    let response = this.service.getUserDetails();
    response.subscribe(data => 
      this.user = data;
    )
  

这是 getUserDetails 方法：

public getUserDetails(): Observable<any> 
    let tokenStr = 'Bearer ' + sessionStorage.token
    const headers = new HttpHeaders().set('Authorization', tokenStr)
    return this.http.get('http://localhost:8080/api/user/getdetails', headers);
  

这是 html：

<ul *ngFor="let server of user.servers">
    <li>Name: server.serverName</li>
</ul>

我该如何解决这个问题？

【问题讨论】：

从http://localhost:8080/api/user/getdetails 获取数据时会得到什么？

我得到一个包含用户名、电子邮件和其他详细信息的用户对象。对象在那里，但我收到此错误

尝试在用户后面加问号。像这样user?.servers

谢谢！有用！你能给我解释一下吗？

【参考方案1】：

在 html 文件中使用 async 管道。

*ngFor="let server of user.servers | async as serv" 然后使用serv.serverName

只有在 api 调用订阅完成时，此管道才会填充 serv。

【讨论】：

现在我得到 2 个错误。 ERROR 错误：InvalidPipeArgument：'[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]' 用于管道'AsyncPipe 和 TypeError：无法读取未定义的属性“服务器”

【参考方案2】：

user 属性未定义，直到 ajax 调用完成，并在订阅中初始化。模板文件中的user.servers 在初始阶段给出错误，因为user?.servers 将继续访问.servers 属性，只有在定义user 属性时。