Question

我是Angular的新人。我是一个名为User的课程：

export class User {
  private id: number;
  private name: string;
  private surname: string;

  get Id(): number {
    return this.id;
  }
  set Id(newId: number) {
    this.id = newId;
  }

  get Name(): string {
    return this.name;
  }
  set Name(newName: string) {
    this.name = newName;
  }

  get Surname(): string {
    return this.surname;
  }
  set Surname(newSurname: string) {
    this.surname = newSurname;
  }
}

...一个用于检索用户数组的函数：

  getValues() {
    this.usersService.getUsers()
      .subscribe((users: User[]) => this.dataSource = users);
  }

以及从后端WebApi中检索用户数组的方法：

getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.usersSearchUrl)
      .pipe(
      tap(users => this.log(`fetched users`)),
      catchError(this.handleError('getUsers', []))
      );
  }

最后json从webapi返回：

[{"id":"1","name":"Alberico","surname":"Gauss"},{"id":"2","name":"Anassimandro","surname":"Dirac"},{"id":"3","name":"Antongiulio","surname":"Poisson"}]

我原本希望调用会自动映射User类，而只是给我一个User类型的数组，实际上如果我在我的组件中写一些东西.subscribe（（utenti：Utente []）=＆gt;的console.log（个用户[0] .Surname））;控制台写信给我＆＃34; undefined＆＃34;。你能告诉我哪里错了吗？感谢

Answer 1

您正在按照预期从后端检索JSON。 Javascript（或typescript）类不是一回事。

当返回JSON时，它可以在Javascript中自动转换为简单的JSON对象，但它不会包含所有的getter和setter。所以这些类方法不可用，这就是你未定义的原因。

删除所有getter和setter并添加构造函数。然后你可以直接调用Surname作为属性，它将返回值（因为它将只是一个普通的JSON对象）。

export class User {
  constructor() {
  }

  public id: number;
  public name: string;
  public surname: string;
}

或者没有构造函数，只是直接声明属性：

export class User {    
  public id: number;
  public name: string;
  public surname: string;
}

或者您也可以使用界面：

export interface User {   
  id: number;
  name: string;
  surname: string;
}

您可以详细了解此问题here和here。

Answer 2

我认为在组件ts中使用如下代码：

 users: User[];
  constructor(
    private us: usersService,
    public auths: AuthService
  )

    this.us.getUsers.subscribe(
      users=> {
        this.users= users.map((user) => {
          return new User(user);
        });
      }
    );

在服务中我想写：

  public getUsers(): Observable<User[]> {

    let headers = new Headers();
    headers.append('x-access-token', this.auth.getCurrentUser().token);

    return this.http.get(Api.getUrl(Api.URLS.getUsers), {
      headers: headers
    })
      .map((response: Response) => {
        let res = response.json();

        if (res.StatusCode === 1) {
          this.auth.logout();
        } else {
          return res.StatusDescription.map(user=> {
            return new User(user);
          });
        }
      });
  }

对我来说，这种逻辑工作是完美的。我希望能帮助你解决这个问题

如何从http调用映射角度2类

2 个答案: