Angular 4中HttpClient过滤JSON报错解决：Http迁移后filter属性不存在

我明白你在从Http切换到Angular 4的HttpClient时遇到的这个问题——明明已经导入了rxjs的filter操作符，却还是报Property 'filter' does not exist on type 'Object'的错。其实问题出在HttpClient的默认返回类型上，我来给你拆解一下怎么解决：

问题根源 #

Angular的HttpClient默认会把响应数据解析成Object类型，而你要调用的filter是数组的原型方法，TypeScript不知道你拿到的data其实是一个数组，所以会抛出类型错误。你之前导入的rxjs/add/operator/filter是Observable的操作符，和这里数组的filter不是一回事，所以这个导入其实帮不上忙~

两种解决方法 #

方法1：快速用类型断言临时解决

如果你只是想快速让代码跑起来，可以把返回的data断言成数组类型：

constructor(public navCtrl: NavController, public http: HttpClient, private alertCtrl: AlertController) {
  this.http.get('http://example.com/date.php')
    .subscribe(data => {
      // 把data断言为任意数组类型
      this.posts = data as any[];
      // 现在就能正常调用数组的filter方法了
      this.postsfilter = this.posts.filter(item => item.date == todayDate);
    });
}

方法2：定义接口指定数据结构（更规范）

如果想让代码更健壮、类型更安全，建议先定义一个接口来描述返回的JSON数据结构：

// 先在组件或单独的文件里定义接口，根据你的实际数据字段调整
interface Post {
  date: string; // 假设日期是字符串类型，你可以改成实际的类型比如Date
  // 加上其他你需要的字段，比如id、content等
}

constructor(public navCtrl: NavController, public http: HttpClient, private alertCtrl: AlertController) {
  // 在get请求里指定返回类型为Post数组
  this.http.get<Post[]>('http://example.com/date.php')
    .subscribe(data => {
      this.posts = data;
      // 此时TypeScript已经知道data是Post数组，能正常调用filter
      this.postsfilter = data.filter(item => item.date == todayDate);
    });
}

这样不仅能解决报错，还能在开发时获得TypeScript的类型提示，避免拼写错误之类的问题。

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