代码之家  ›  专栏  ›  技术社区  ›  Marcus Grass

未将投递请求发送到服务器

  •  0
  • Marcus Grass  · 技术社区  · 8 年前

    我正在尝试将数据发布到我从表单中提取的API。

    问题是它根本不会尝试发送邮件请求。寄存器.component.ts:

    import { Component, OnInit } from '@angular/core';
    import { RegisterService } from '../register.service';
    import { FormGroup, FormBuilder, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
    import { user } from '../user'
    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.css']
    })
    export class RegisterComponent implements OnInit {
      public myForm: FormGroup;
      public submitted: boolean;
      public events: any[] = [];
    
      constructor(private registerService: RegisterService, 
      private _fb: FormBuilder) { }
    
      ngOnInit() {
        this.myForm = new FormGroup({
          username: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
          email: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
          org_number: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
          password: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)])
        });
      }
    
      save(model: user, isValid: boolean){
        this.submitted = true;
        this.registerService.postUser(model)
        console.log(model, isValid)
      }
    

    以及它所呼叫的服务:

    import { Injectable } from '@angular/core';
    import { user } from './user';
    import { Observable, of } from 'rxjs';
    import { map, catchError } from 'rxjs/operators'
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    
    const HttpOptions = {
      headers: new HttpHeaders({ 'Content-type': 'application/json' })
    };
    const HttpOption2 = {
      headers: new HttpHeaders({ 'Content-type': 'application/x-www-form-urlencoded' })
    }
    @Injectable({
      providedIn: 'root'
    })
    export class RegisterService {
    
      private usersUrl= 'api/v1/accounts';
    
      constructor(
        private http: HttpClient,
    
      ) { }
    
      getUsers(): Observable<user[]> {
        return this.http.get<user[]>(this.usersUrl)
      }
      postUser(object): Observable<user[]>{
        console.log(object)
        console.log('Did it enter this?')
        return this.http.post<user[]>(this.usersUrl, user, HttpOptions)
      }
    }
    

    我的代码输出预期信息:用户名:'username',电子邮件:'email'等。

    我知道它调用这个函数,因为它也输出:“它输入这个吗?”.

    我的API没有收到post请求,我不知道为什么。我一直在寻找关于 official angular Httpclient 页面,以及大量的堆栈溢出文章,我尝试了添加.subscribe,但我得到了错误类型订阅不可分配给类型可观测用户,如果我添加.map(),我得到的映射在类型可观测用户上不存在,如果我添加.pipe(),我不会得到错误消息,但仍然没有post-requiresT 如果我加上管道( catchError(this.handleError('addHero',hero))。 ; 我得到的类型可观察用户不可分配给类型可观察用户。有什么想法吗?

    1 回复  |  直到 8 年前
        1
  •  2
  •   Sajeetharan    8 年前

    您需要订阅请求才能被调用,

      this.registerService.postUser(model).subscribe(result => this.result =result);
    

    确保声明一个名为result的变量来分配响应的数据,

    result : any;
    
    推荐文章