Angular更改当我使用promise时的接口定义

loading...


0

我在界面中预定义了属性,如下所示:

export interface User {
  userID : number;
  userName : string;
  userAge : string;
}

此外,我有一些服务从一些虚拟REST api返回一些虚拟数据 .

getUsers(){
    return this.http.get("https://fakerestapi.azurewebsites.net/api/Authors").toPromise();
  }

并在组件中我正在使用此服务并将数据转换为用户列表,如下面的代码:

_service.getUsers().then(i => { this.userList = i as User[]; console.log(this.userList) });

如您所见,我使用'AS'将响应转换为我各自的user []数组 .

ISSUE:
虚拟REST api重建以下数据

{
    "ID": 1,
    "IDBook": 1,
    "FirstName": "First Name 1",
    "LastName": "Last Name 1"
  }

当我检查控制台时,用户类没有ID,IDBook等属性,它会自动更改User类的定义并显示所有数据,尽管属性不匹配 .

链接:https://stackblitz.com/edit/angular-pryy3f?file=src%2Fapp%2Fappservice.service.ts

根据我的理解,只应显示匹配属性并非全部显示 .

loading...

2回答

  • 1

    在typescript as 中,keyword不是类型转换而是类型断言 . 所以发生的事情是这样的:

    • 你要求 User[]

    • 你收到 JSON object[]

    • JSON object[] 被转换为User的接口数组(看看typescript中的接口是什么)

    • 编译器接受 this.userList 作为 User[] 但它只是一个类型断言

    因此在这种情况下使用 as 关键字是多余的,完全没用 .

    类型断言仅对自动完成和编译时详细描述的其他类似事物有用 . 但这不是真正的演员 . 所以当你执行你的代码 this.userList 总是 JSON Object[]

    如果您需要真正的User对象,您应该执行以下操作:

    _service.getUsers().then(i => { 
        this.userList = i.map(u => new User(u)); 
        console.log(this.userList) 
    });
    

    显然你应该在 User 类中定义一个构造函数

    EDIT

    查看您的Authors文件,我可以看到您正在使用转换为被视为Object的数组的xml语法 . 因此,map运算符失败 . 我改变了一下你的代码

    User

    export class User {
      userID : number;
      FirstName : string;
      userAge : string;
    
      constructor()
      constructor(u: User)
      constructor(u?: User) {
         this.userID = u && u.userID || -1;
         this.FirstName = u && u.FirstName || '';
         this.userAge = u && u.userAge || '';
      }
    
      clone(): User {
        // TODO CLONE USER
        return new User();
      }
    }
    

    AppComponent

    import { Component } from '@angular/core';
    import { AppserviceService } from './appservice.service';
    import { User } from './user';
    import 'rxjs/add/operator/map';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      private userList: User[] = [];
      constructor(private _service: AppserviceService) {
        _service.getUsers().then(i => {  
          for (let c=0; c<10; c++) {
            let u = new User(i[c]);
            this.userList.push(u);
          }
    
          console.log('this.userList', this.userList);
        });
      }
    }
    

  • 0

    使用Typescript定义接口对生成的Javascript代码完全没有影响,因为Javascript中不存在接口 . 你可以通过玩Typescript playground来搞清楚 . 接口只是帮助您(作为开发人员)和您的团队在编译时检测错误的东西 .

    因此,无论您应用于哪个接口,从HTTP返回的对象将始终保持原样,因为Javascript中没有接口或强制转换 .

评论

暂时没有评论!