Angular使用RxJs map修改对象集合属性报TS2322错误如何解决

错误原因 #

• Array的forEach()方法本身没有返回值，执行后默认返回void，而RxJS的map操作符需要你返回和声明类型匹配的MemberInfo[]数组，同时你错误地把return item写在了forEach的回调函数内，该返回值不会被外层RxJS的map接收，因此类型校验不通过抛出错误。

解决方案 #

你可以任选以下两种实现方式：

方式1：遍历修改后显式返回原数组 #

把return item语句移到forEach外部：

ngOnInit(): void {
  this.memberInfoLists$ = this.service.memberInfoLists$.pipe(map(item => {
    item.forEach(y => {
      y.MemberPhotoUrl = y.MemberPhotoUrl ? this.memberPhotoUrl + y.MemberPhotoUrl : this.memberDefaultPhoto;
      y.VoterPhotoUrl = y.VoterPhotoUrl ? this.memberPhotoUrl + y.VoterPhotoUrl : this.memberDefaultPhoto;
    });
    // 遍历结束后显式返回修改后的数组
    return item;
  }));
  this.total$ = this.service.total$;
}

方式2：用数组map生成新数组（不可变数据推荐） #

如果需要遵循不可变数据规范，不修改原数组和原对象，可以用数组的map方法生成新对象组成的数组：

ngOnInit(): void {
  this.memberInfoLists$ = this.service.memberInfoLists$.pipe(map(item => 
    item.map(y => ({
      ...y,
      MemberPhotoUrl: y.MemberPhotoUrl ? this.memberPhotoUrl + y.MemberPhotoUrl : this.memberDefaultPhoto,
      VoterPhotoUrl: y.VoterPhotoUrl ? this.memberPhotoUrl + y.VoterPhotoUrl : this.memberDefaultPhoto
    }))
  ));
  this.total$ = this.service.total$;
}

内容的提问来源于stack exchange，提问作者mnu-nasir