Angular 5中如何用类/接口在视图渲染后端返回数据？

让我帮你一步步拆解并解决遇到的问题：

一、先搞定「Cannot read property 'name' of undefined」报错 #

这个错误的核心原因是：HTTP请求是异步的，组件初始化时usuario还是undefined，但视图已经开始尝试访问它的name属性了。给你三个靠谱的解决思路：

1. 安全导航操作符（最简单的临时方案） #

直接在模板里用?.语法避免访问undefined的属性：

<h1>{{ usuario?.name }}</h1>

当usuario还没加载完成时，这个表达式会自动返回undefined，不会抛出错误。

2. 条件渲染（更友好的用户体验） #

添加加载状态，等数据返回后再渲染用户信息：

<div *ngIf="usuario; else loadingState">
  <h1>{{ usuario.name }}</h1>
  <!-- 其他用户信息字段 -->
</div>
<ng-template #loadingState>
  <p>正在加载用户信息...</p>
</ng-template>

这样用户不会看到奇怪的报错，而是有明确的加载提示。

3. 提前初始化对象（从根源避免undefined） #

在组件里给usuario初始化一个空的UserProfile实例：

usuario: UserProfile = new UserProfile();

这样即使数据还没返回，usuario也是一个拥有默认空属性的对象，视图访问它的属性时就不会报错了。

二、检查你的服务方法潜在问题 #

我注意到你的getUserProfileS（获取所有用户）方法有两个小问题：

1. URL没有拼接sort参数，而且漏了请求头的token（获取所有用户大概率也需要权限校验吧？）
2. 解析后端返回数据时，没像单个用户那样取result字段（根据你提供的返回格式，所有用户的数据应该在result数组里）

修改后的方法应该是这样：

getUserProfileS(sort = '-createdAt'): Promise<void | UserProfile[]> {
  let url = `${URL_SERVICIOS}/users?sort=${sort}`; // 补全sort参数
  let token2 = localStorage.getItem("TOKEN");
  let headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token2);
  let options = new RequestOptions({headers: headers});
  
  return this.http.get(url, options)
    .toPromise()
    .then(response => response.json().result as UserProfile[]) // 取result数组
    .catch(this.handleError);
}

另外，单个用户的getUserProfile方法是正确的，但要确保后端返回的result确实是单个用户对象。

三、类 vs 接口：该怎么选？ #

这个问题取决于你的实际需求：

选接口的情况： #

• 你只需要类型校验，不需要实例化对象、不需要给对象加方法、不需要默认值
• 接口更轻量，编译后会被完全移除，不会增加运行时代码
  示例接口写法：

export interface UserProfile {
  id: number;
  photoProfile?: any;
  id_facebook?: any;
  name: string;
  surname: string;
  // ... 其他属性和类保持一致
}

选类的情况： #

• 你需要实例化对象（比如用new UserProfile()初始化组件里的usuario）
• 后续可能要给用户对象添加方法（比如格式化生日、处理头像地址等）
• 需要通过构造函数给属性赋默认值（像你现在用Object.assign的方式）

你的场景里已经在用类的构造函数初始化对象，所以继续用类完全没问题。如果只是想做类型校验，接口也能满足需求，看你后续的功能规划。

额外要检查的细节 #

1. 确认HTTP请求是否成功：在组件的then回调里打印user，看是否真的拿到了后端返回的数据
2. 字段名要完全匹配：你的类里同时有photoProfile和photo_profile，大概率是笔误，要和后端返回的字段名保持一致
3. Token有效性：检查请求头里的token是否正确，避免因为权限问题返回空数据

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