Angular 请求中的 HttpClient 未启动

Question

简介： 表单中的按钮调用组件中名为 methodForm 的方法。 methodForm又调用服务层中名为methodService的方法。 methodService 应进行 HTTP POST 调用。 问题： HTTP POST 调用未发生。 正如 console.log 所确认的，methodService 仍然被调用。 问题： 为什么 HTTP POST 调用没有被执行？ 可能的原因和可能的解决方案是什么？ 附加信息： 我尝试使用接口类型对 Observable 进行类型转换。 我尝试使用 JSONPlaceholder API，但没有成功。 我正在使用独立的 Angular 组件。

注册.component.html

<button
            class="w-100 btn btn-primary btn-lg"
            (click)="register()"
            [disabled]="form.invalid && form.submitted">
            Continua la registrazione
          </button>
          <div class="mt-2 text-center">
          <small 
            *ngIf="form.submitted && form.invalid"
            class="form-text text-danger">Il form non è valido. Controlla i campi
          </small>
        </div>

注册.component.ts：

export class RegisterComponent implements OnInit {
  @ViewChild('form') form!: NgForm;
  grantValue!: number;
  grantUser: number = 2;
  grantClient: number = 3;
  private __genericUser: GenericUser = new GenericUser;
  italianProvinces: string[] = [...];
  selectedProvince: string = '';
  maxDate!: string;

  ngOnInit(): void {
    this.genericUser.gender = "";
    this.genericUser.grant = 0;
    this.genericUser.province = "";
    const today = new Date();
    const year = today.getFullYear();
    const month = ('0' + (today.getMonth() + 1)).slice(-2);
    const day = ('0' + today.getDate()).slice(-2);
    this.maxDate = `${year}-${month}-${day}`;
  }

  constructor( private service: RegisterService, private router: Router){
  }

  set genericUser(genericiUser: GenericUser){
    this.__genericUser = genericiUser;
  }
  get genericUser(): GenericUser {
    return this.__genericUser;
  }
  
  register(): void {
   if(this.form.invalid){
      this.service.register(this.__genericUser);
    } else {
      this.router.navigateByUrl('');
    }
    }
}

注册.service.ts：

@Injectable({
  providedIn: 'root'
})
export class RegisterService{
  apiurl = environment.API_URL_REGISTER_USER;
  api = 'https://jsonplaceholder.typicode.com/posts'
  constructor(private http: HttpClient) {}

  register(__genericUser: GenericUser): Observable<GenericUser> {
    console.log("stop");
    return this.http
      .post<GenericUser>(this.apiurl, __genericUser)
      .pipe(map((resp) => resp));
  }
}

app.config.ts：

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};

Answer 1

服务方法返回一个您需要订阅的可观察对象。在您的组件中进行如下更改：

this.service.register(this.__genericUser).subscribe(); // added subscribe()

并且在服务中你可以添加操作符来完成并避免内存泄漏。像这样：

return this.http
      .post<GenericUser>(this.apiurl, __genericUser)
      .pipe(take(1), map((resp) => resp));