Angular调用MongoDB返回对象的getName()方法报错求助

你遇到的问题本质是：HttpClient返回的是纯JSON对象，不是Person类的实例。TypeScript的<Person[]>只是编译时的类型断言，并没有把JSON对象真正转换成Person类的实例。这些JSON对象只有personName属性，没有Person类原型上的getName方法，所以运行时调用会报错。

需要手动将后端返回的JSON对象转换为Person类的实例，有两种常用方式：

方式1：在Person类中添加静态转换方法 #

修改Person类，增加一个静态方法用于从JSON对象创建实例：

export class Person{
    personName: string = "";

    // 可选：通过构造函数初始化属性
    constructor(personName?: string){
        if(personName) this.personName = personName;
    }

    // 静态方法：将JSON对象转换为Person实例
    public static fromJson(json: any): Person {
        const person = new Person();
        person.personName = json.personName;
        // 其他属性可在此处补充赋值
        return person;
    }

    public getName(){
        return "HALLO WORLD";
    }
}

然后在订阅响应时，把每个JSON对象转成Person实例：

public getPersons(): void{
    this.personService.findAll().subscribe(
        (response: any[]) => {
            // 遍历响应数组，逐个转换为Person实例
            this.persons = response.map(item => Person.fromJson(item));
            // 现在可以正常调用方法
            this.persons[0].getName();
            console.log(response);
        },
        (error: HttpErrorResponse) => {
            alert(error.message);
        }
    );
}

方式2：在Service层统一转换 #

如果不想在组件里处理，可以把转换逻辑放到PersonService中，利用RxJS的map操作符：

export class PersonService{
  private personUrl: string = 'http://localhost:8080/api/person';
  constructor(private http: HttpClient) {}

  public findAll(): Observable<Person[]> {
    return this.http.get<any[]>(this.personUrl).pipe(
      // 把每个JSON对象转换为Person实例
      map(response => response.map(item => Person.fromJson(item)))
    );
  }
}

这样组件里的订阅代码可以保持不变，直接赋值即可：

this.persons = response;
this.persons[0].getName(); // 正常执行

• TypeScript的类型断言（<Person[]>）仅在编译阶段起作用，不会改变运行时对象的本质。
• 后端返回的JSON数据只会包含对象的属性，不会携带类的方法或原型信息，必须手动实例化类才能调用类定义的方法。

内容的提问来源于stack exchange，提问作者Benedikt Müller