Angular无需手动取消订阅Observable时类型不匹配报错求助

嘿，我一眼就揪出问题根源啦！你遇到的是Observable类型不匹配的错误，咱们一步步拆解：

问题出在哪？ #

• 你声明的campaigns变量是Observable<ICampaigns[]>，意思是它要接收一个包含ICampaigns数组的 Observable。
• 但你的getCampaigns()方法返回的是Observable<ICampaigns>，也就是单个ICampaigns对象的 Observable，两者的类型完全不兼容，所以赋值时直接报错了。

两种解决办法，看你实际场景选： #

1. 如果后端接口返回的本来就是ICampaigns数组

直接修改HTTP方法的泛型定义，让它返回数组类型的Observable：

getCampaigns() { 
  return this.http.get<ICampaigns[]>(this.BASE_URL + '/campaigns/'); 
}

这样this.campaigns = this.getCampaigns();就能完美匹配类型，报错自然消失。

2. 如果后端确实只返回单个ICampaigns对象，但你需要转成数组

可以借助RxJS的map操作符把单个对象包装成数组，记得先导入map：

import { map } from 'rxjs/operators';

// 赋值时通过pipe转换类型
this.campaigns = this.getCampaigns().pipe(
  map(singleCampaign => [singleCampaign])
);

另外补充一句：你想用无需手动取消订阅的方案（比如模板里用async管道）是完全可行的，只要把类型对齐，这个方案就能正常工作~

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