Angular 2 + Rails 4：创建记录后跳转详情页报TS2339错误

作为从Rails转Angular的开发者，你遇到的这个问题其实是TypeScript强类型特性导致的典型问题，我来帮你拆解一下并给出解决方案：

错误原因分析 #

你调用this.apiService.post()后，TypeScript默认把响应r推断为Object类型，而Object类型并没有定义id属性——哪怕你知道后端确实会返回带id的对象，TypeScript编译器也会因为类型不明确而抛出TS2339: Property 'id' does not exist on type 'Object'的错误。

解决方案 #

方案1：给API请求指定泛型类型（推荐） #

如果你的ApiService的post方法支持泛型（这是Angular中HTTP请求的最佳实践），你可以在调用时明确指定返回类型为BmBiller，这样TypeScript就知道响应对象包含id属性了：

修改onSubmit方法中的请求代码：

public onSubmit() {
  this.apiService.post<BmBiller>("bm_billers", this.bm_biller).subscribe((r) => {
    this.router.navigate(['/bm_billers/', r.id]);
  });
}

同时，确保你的ApiService中的post方法是泛型实现的，比如：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = '你的Rails后端API地址';

  constructor(private http: HttpClient) {}

  post<T>(endpoint: string, data: any): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}/${endpoint}`, data);
  }
}

方案2：类型断言（快速临时解决） #

如果暂时不想修改ApiService，可以通过类型断言告诉TypeScript“这个对象就是BmBiller类型”，绕过编译检查：

public onSubmit() {
  this.apiService.post("bm_billers", this.bm_biller).subscribe((r) => {
    // 断言r为BmBiller类型
    this.router.navigate(['/bm_billers/', (r as BmBiller).id]);
  });
}

或者更宽松地断言为any类型（不推荐长期使用，会失去TypeScript的类型检查优势）：

this.router.navigate(['/bm_billers/', (r as any).id]);

额外验证：确认后端响应格式 #

最后别忘了检查你的Rails后端，确保创建bm_biller后返回的JSON响应确实包含id字段——比如Rails的create动作应该返回render json: @bm_biller, status: :created，这样Angular才能拿到正确的id值。

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