Angular 4 Observable与Ionic 3点赞功能前两次正常，第三次报错

嘿，我一眼就揪出问题所在了！你遇到的第三次点击报错“不是函数”，核心原因是你在image-management.ts的likeImage方法里，把类的同名方法给覆盖成字符串了！

看这段出问题的代码：

if (data.status == "restored" || data.status == "liked") {
  this.likeImage = data.status; // 这里就是罪魁祸首！
  observer.next({status: true, numberOfLikes: data.likes});
  observer.complete();
}

this.likeImage本来是你定义的类方法，结果你在这里把它赋值成了data.status（一个字符串，比如"liked"或者"restored"）。第一次和第二次调用时，方法还没被覆盖，所以能正常执行；但第二次调用完成后，this.likeImage已经变成字符串了，第三次点击调用的时候，自然就会报错“不是函数”。

第一步：改掉覆盖方法的错误代码 #

把那行覆盖方法的代码删掉，或者换一个类属性来存储状态。比如先在类里定义一个专门的状态属性：

// 在image-management类顶部添加属性
currentLikeStatus: string;

// 然后修改likeImage方法里的对应代码
if (data.status == "restored" || data.status == "liked") {
  this.currentLikeStatus = data.status; // 用新属性存储状态，不再覆盖方法
  observer.next({status: true, numberOfLikes: data.likes});
  observer.complete();
}

第二步：优化Observable写法（可选但推荐） #

你不需要手动创建Observable，直接返回this.http.post的Observable即可，手动创建不仅冗余还容易出错。优化后的likeImage方法可以写成这样：

likeImage(image): Observable<any> { 
  let data = new URLSearchParams(); 
  data.append('image_id', image.id); 
  data.append('access_token', this.userMng.getToken()); 

  return this.http.post(this.likeLocal, data).pipe(
    map(res => res.json()),
    map(data => {
      if (data.status == "restored" || data.status == "liked") {
        this.currentLikeStatus = data.status;
        return {status: true, numberOfLikes: data.likes};
      }
      if (data.status == "deleted") {
        return {status: false, numberOfLikes: data.likes};
      }
      throw new Error('Unknown status received');
    }),
    catchError(err => {
      console.log(err);
      return throwError(() => err);
    })
  );
}

这样代码更简洁，也避免了手动管理Observable订阅和complete的潜在问题。

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