如何修复Angular中‘getFirstName is not a function’错误

问题根源 #

你从后端接口拿到的响应是普通JSON对象，不是Student类的实例。TypeScript的类型声明只是编译时的语法检查，运行时这些对象本质还是无方法的JS对象，自然找不到getFirstName方法。

解决方案 #

方案1：把JSON对象转成Student实例 #

在订阅接口响应时，手动将每个返回对象实例化：

修改student.component.ts里的getAllStudents方法：

public getAllStudents(): void {
  this.studentService.getAllStudents().subscribe(
    (response: any[]) => {
      this.students = response.map(studentObj => 
        new Student(
          studentObj.first_name,
          studentObj.last_name,
          studentObj.email,
          studentObj.phone,
          studentObj.image_url,
          studentObj.level,
          studentObj.cin
        )
      );
      console.log(this.students);
    },
    (error: HttpErrorResponse) => {
      alert(error.message);
    }
  );
}

注意：如果后端返回字段和构造函数参数不匹配，要调整对应关系；若后端返回id，可以给Student类加可选参数构造函数，或单独赋值id属性。

方案2：改用接口直接访问属性（更轻量） #

如果Student类只是做类型约束，没有复杂方法逻辑，改成接口更合适：

修改Student.ts为接口：

export interface Student {
  id?: BigInt;
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  image_url?: string;
  level: string;
  cin: string;
}

模板里直接访问属性：

<div *ngFor="let student of students">
    <p>{{student.first_name}}</p>
</div>

方案3：用静态工厂方法创建实例（更优雅） #

在Student类里加静态方法，统一处理JSON转实例：

Student.ts修改：

export class Student {
    private id: BigInt | undefined;
    private first_name: string;
    private last_name: string;
    private email: string;
    private phone: string;
    private image_url: string | undefined;
    private level: string;
    private cin: string;

    constructor(first_name: string, last_name: string, email: string, phone: string, image_url: string, level: string, cin: string) {
        this.first_name = first_name;
        this.last_name = last_name;
        this.email = email;
        this.phone = phone;
        this.image_url = image_url;
        this.level = level;
        this.cin = cin;
    }

    // 静态工厂方法
    public static fromJson(json: any): Student {
        return new Student(
            json.first_name,
            json.last_name,
            json.email,
            json.phone,
            json.image_url,
            json.level,
            json.cin
        );
    }

    public getFirstName(): string { return this.first_name; }
}

组件里调用：

this.students = response.map(Student.fromJson);

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