Angular报错：this.question.getOriginalLanguage is not a function问题求助

这个错误我之前也踩过坑，原因其实很明确：你通过@Input()接收到的Question对象并不是你定义的Question类的实例，大概率是从API返回的原始JSON数据直接传递过来的普通JavaScript对象。普通对象不会继承Question类原型上的getOriginalLanguage方法，自然调用的时候就会报错。

下面给你几个靠谱的解决方案：

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

不管是从API拿数据，还是父组件传数据过来，别直接把原始JSON赋值给question，手动创建Question实例再把属性塞进去就行。

比如在父组件或者数据服务里：

// 假设apiResponse是接口返回的JSON
const apiResponse = {
  id: '1',
  createDate: '2024-05-20T12:00:00Z',
  translations: [{type: 'ORIGINAL', content: 'xxx'}, ...],
  username: 'isADon'
};

// 转成Question实例
this.question = Object.assign(new Question(), apiResponse);
// 注意：如果createDate是字符串，要手动转成Date类型
this.question.createDate = new Date(this.question.createDate);

嫌手动赋值麻烦的话，给Question加个静态工厂方法更优雅：

export class Question { 
  public id: string; 
  public createDate: Date; 
  public translations: Translation[]; 
  public username: string; 

  // 静态方法：从JSON生成实例
  static fromJson(json: Partial<Question>): Question {
    const instance = new Question();
    Object.assign(instance, json);
    // 处理日期类型转换
    if (typeof json.createDate === 'string') {
      instance.createDate = new Date(json.createDate);
    }
    return instance;
  }

  public getOriginalLanguage(): Translation{ 
    return this.translations.find(value => value.type == 'ORIGINAL'); 
  } 
}

用的时候就一行：

this.question = Question.fromJson(apiResponse);

这样子组件的ngOnInit里，this.question就是真正的类实例，调用方法完全没问题。

方案2：把方法改成纯函数（不用实例也能调用） #

如果不想折腾实例化的事儿，直接把getOriginalLanguage改成独立的纯函数，或者类的静态方法：

// 独立工具函数
export function getOriginalLanguage(question: { translations: Translation[] }): Translation | undefined {
  return question.translations?.find(value => value.type == 'ORIGINAL');
}

// 或者作为Question类的静态方法
export class Question { 
  // ... 其他属性
  public static getOriginalLanguage(question: Question): Translation | undefined{ 
    return question.translations?.find(value => value.type == 'ORIGINAL'); 
  } 
}

然后在组件里这么用：

// 纯函数版本
const originalLang = getOriginalLanguage(this.question);

// 静态方法版本
const originalLang = Question.getOriginalLanguage(this.question);

方案3：用输入setter自动转换实例 #

在子组件里给@Input()加个setter，只要父组件传数据过来，自动转成Question实例：

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  private _question: Question;

  @Input()
  set question(rawData: Partial<Question>) {
    // 用方案1里的fromJson方法转换
    this._question = Question.fromJson(rawData);
  }

  get question(): Question {
    return this._question;
  }

  ngOnInit() {
    const originalLang = this.question.getOriginalLanguage(); // 完美运行
  }
}

这个方案最省心，父组件该传啥传啥，子组件内部自动处理实例化，完全不用改父组件的代码。

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