时间戳

首页 > 解决方案 > Angular http.get 请求未按预期工作

angular - Angular http.get 请求未按预期工作

问题描述

我正在尝试为来自我的 web api 的请求构建前端。响应模型为：

export class User {
    ID: number;
    first_name: string;
    last_name: string;
    isAdmin: boolean;
}

在 user.components 中，我使用以下代码：

 users: User[];

 ngOnInit(){        
        this.userService.getUsers().subscribe(data => {
                console.log(data);
                this.users = data;
            });
    }

对于服务：

   getUsers(): Observable<User[]>{
        return this.http.get<User[]>(this.apiUrl+"/users");

对于 html：

<table>
  <tr *ngFor="let user of users">
    <td>{{user.ID}}</td>
    <td>{{user.first_name}}</td>
    <td>{{user.last_name}}</td>
    <td>{{user.isAdmin}}</td>
  </tr>
</table>

控制台回答：控制台日志

我没有收到任何错误，我可以在控制台中看到结果。但是，我在网页上看不到答案。我尝试了几件事，发现如果我在“用户”类中使用与后端相同的变量名，我可以看到答案。这是应该的还是我在某个地方犯了错误？

标签： angulartypescriptasp.net-core

解决方案

如果您只是试图将接收到的数据符合特定的对象结构，那么 Typescript接口比类更适合。接口仅在编译时可用，可用于检查接收到的数据是否为预期的实际类型。

export interface User {
  user_ID: number;
  first_name: string;
  last_name: string;
  isAdmin: boolean;
}

但最重要的是，我们试图断言来自后端的对象结构是特定类型的。但是从您的屏幕截图中，ID 被调用user_ID，因此您应该在前端将其user_ID更改为或在后端将其更改为ID. 后端的对象属性应该与前端的对象属性完全匹配。不过，您可以声明可选属性。

export interface User {
  user_ID: number;
  first_name: string;
  last_name?: string;
  isAdmin?: boolean;
}

这里last_name和isAdmin属性是可选的。所以以下两个赋值是有效的

obj1: User = { user_ID: 1, first_name: 'sample' };
obj2: User = { user_ID: 1, first_name: 'sample', last_name: 'sample' };

当您需要修改数据并执行一些计算时，类通常很有帮助。他们需要实例化类似于其他基于 OOP 的类。

最后，TS 接口和类用于类型断言（类型检查）并将更传统的基于 OOP 的方法附加到 Javascript。所以理论上不需要特定类型来使用来自后端的数据。对于它的价值，你可以简单地做

服务

getUsers(): Observable<any> {
  return this.http.get(this.apiUrl+"/users");
}

零件

users: any;

推荐阅读