Angular v7中从Service发起POST请求报错求助

嘿，我来帮你搞定这个问题！你碰到的Property 'subscribe' does not exist on type 'void'错误，核心原因是你的submitShipment方法没有返回HTTP请求生成的Observable，反而直接在Service内部调用了subscribe——这样方法默认返回void，当你在组件里尝试调用submitShipment().subscribe()时，自然会报错。

修正思路：遵循Angular的最佳实践 #

在Angular中，Service的职责是发起请求并返回Observable，而订阅（subscribe）的逻辑应该交给调用它的组件来处理，这样既符合关注点分离，也能让请求逻辑更灵活（比如组件可以根据需求添加不同的订阅回调）。

修正后的Shipment.service.ts代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { ReturnShipment } from '../interfaces/return-shipment';
import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class ShipmentService {
  private shipmentCreation = 'api/ReturnShipmentQueues';

  constructor(private http: HttpClient) { }

  // 修改这里：返回Observable<ReturnShipment>，去掉内部的subscribe
  submitShipment(rShip: ReturnShipment): Observable<ReturnShipment> {
    return this.http.post<ReturnShipment>(this.shipmentCreation, rShip, httpOptions)
      .pipe(
        tap(data => console.log('提交成功：' + JSON.stringify(data))),
        catchError(this.handleError) // 用完善的错误处理
      );
  }

  // 完善错误处理方法
  private handleError(error: HttpErrorResponse) {
    let errorMessage = '未知错误！';
    if (error.error instanceof ErrorEvent) {
      // 客户端或网络错误
      errorMessage = `客户端错误: ${error.error.message}`;
    } else {
      // 后端返回的错误
      errorMessage = `服务器返回错误: ${error.status}, 消息: ${error.message}`;
    }
    console.error(errorMessage);
    return throwError(() => new Error(errorMessage));
  }
}

在组件中调用Service的方法 #

现在你可以在组件里注入ShipmentService，然后调用submitShipment并订阅：

import { Component } from '@angular/core';
import { ShipmentService } from './path-to/shipment.service';
import { ReturnShipment } from './path-to/return-shipment';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private shipmentService: ShipmentService) { }

  onSubmitShipment(shipmentData: ReturnShipment) {
    this.shipmentService.submitShipment(shipmentData)
      .subscribe({
        next: (response) => {
          // 处理成功逻辑，比如提示用户、刷新数据
          alert('包裹提交成功！');
        },
        error: (err) => {
          // 处理错误逻辑
          alert('提交失败：' + err.message);
        }
      });
  }
}

额外说明 #

• 我帮你完善了handleError方法，它能区分客户端和服务器端错误，返回更清晰的错误信息，这在调试和用户体验上都更友好。
• 给http.post指定了泛型<ReturnShipment>，这样TypeScript能帮你做类型检查，避免后续出现类型相关的bug。

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