Angular重复下单功能遇TypeScript类型不匹配错误求助

错误信息 #

Argument of type '{ value: any; }[]' is not assignable to parameter of type '{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }[]'.
[ng]   Type '{ value: any; }' is missing the following properties from type '{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }': sifra, naziv, kolicina, ean, and 6 more.
[ng] 
[ng] 62     this.cartService.repeatOrder(products).subscribe(

问题根源 #

1. 在order-view.page.ts的repeatThisPurchase方法中，你错误地将商品数组包装成了{value: any}[]结构，而服务端需要的是包含sifra、naziv等字段的原始商品对象数组。
2. cart.service.ts中直接将数组存入FormData，后端无法正确解析这种格式的数据。

解决方案 #

1. 修复order-view.page.ts的数据处理 #

删掉重复定义的Izdelki类，直接复用SingleOrder['izdelki']类型，同时移除不必要的数组包装逻辑：

// 删掉重复的Izdelki类
// export class Izdelki {
//   sifra: string;
//   naziv: string;
//   kolicina: number;
//   ean: string;
//   em: string;
//   cena: number;
//   rabat1: number;
//   rabat2: number;
//   prednarocilo: number;
//   ismail: number;
// }

order: SingleOrder;
orderProducts: SingleOrder['izdelki'];
repeatOrderArr: SingleOrder['izdelki'];

repeatThisPurchase() {
  // 直接使用原始商品数组，无需额外包装
  const products = this.orderProducts;

  console.log(products);

  this.cartService.repeatOrder(products).subscribe(
    data => {
      console.log('Data sent to cart: ', data);
    },
    error => {
      console.log('Error', error);
    }
  );
}

2. 修复cart.service.ts的FormData处理 #

将数组序列化为JSON字符串后再存入FormData，确保后端能正确解析：

repeatOrder(products: SingleOrder['izdelki']) {
  return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
    switchMap(token => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
      const formData = new FormData();
      // 将数组转为JSON字符串后添加到FormData
      formData.append('products', JSON.stringify(products));
      return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`, formData, {headers, observe: 'response'});
    }),
    catchError(err => {
      console.log(err.status);
      if (err.status === 400) {
        console.log('Error 400: ', err.error.message);
      }
      if (err.status === 401) {
        this.authService.logout();
        this.router.navigateByUrl('/login', {replaceUrl: true});
      }
      return EMPTY;
    }),
  );
};

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