如何在Angular中无需循环提交表单数组至Web API

组件提交逻辑修改 #

替换原来的循环提交代码，直接把整个表单数组作为请求体发送：

const issuanceArray = this.Form.value?.IssuanceArray;
// 先校验数组有效性
if (issuanceArray?.length) {
  this.microSvc.postDetails(issuanceArray).subscribe({
    next: (response) => {
      // 处理批量提交成功的逻辑
      console.log('提交完成', response);
    },
    error: (error) => {
      // 处理提交失败的逻辑
      console.error('提交出错', error);
    }
  });
}

服务方法优化（可选） #

为了类型安全，建议把服务方法的参数类型明确为数组（和后端DTO对应）：

首先定义与后端一致的TypeScript接口：

// 根据后端TransactionDetailsDTO的实际字段定义
interface TransactionDetailsDTO {
  transactionId: number;
  itemId: number;
  quantity: number;
  // 其他业务字段...
}

然后修改服务方法：

postDetails(data: TransactionDetailsDTO[]): Observable<any>{
  return this.http.post<any>(
    `${this.appsettings.baseURL}ItemPost/TransactionDetailsNoLoop`,
    data
  ).pipe(catchError(this.handleError));
}

后端无需修改 #

你的Web API接口已经正确配置为接收List<TransactionDetailsDTO>，ASP.NET会自动将前端发送的JSON数组序列化为对应的List对象，直接在接口中处理批量数据即可。

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