angular - Angular HTTP 请求错误：“发布有效请求”

Question

我是角度的新手。我正在创建注册功能，但是当我发布请求时它给了我错误：“发布有效请求”。你能检查我的代码并告诉我我做错了什么吗？

服务

     从 '@angular/core' 导入 { Injectable, OnInit }；
        从“@angular/http”导入 {HttpModule, Http,Response,Headers, RequestOptions,Request,RequestMethod}；
        导入'rxjs/add/operator/map'；
        从“rxjs/Rx”导入{ Observable }；
        从'./user'导入{用户}；
        从“@angular/common/http”导入 { HttpClient,HttpHeaders, HttpRequest }；


        @可注射（{
          提供在：“根”
        })
        导出类 RegisterService 实现 OnInit {

          posts_Url: string = 'http://localhost:8080/GradeMyDrawings/teacher/register';

            构造函数（私有http：HttpClient）{

            }

            ngOnInit () {

            }

          注册用户（用户：用户）{     
             返回 this.http.post(this.posts_Url, JSON.stringify(user))
              .map（（响应：响应）=>响应）；           
          }
        }

注册组件

    从“@angular/core”导入 {Component, OnInit,Input}
        从'../../_common/services/common.service'导入{CommonService}；
        从'../../_common/common.component'导入{CommonComponent}；
        从'../../shared/user'导入{用户}；
        从'../../shared/register.service'导入{RegisterService}；
        从'@angular/router'导入{路由器，RouterModule}；
        从“@angular/http”导入 {HttpModule, Http,Response,Headers, RequestOptions}；
        从“@angular/common/http”导入 {HttpClient, HttpErrorResponse}；



        @零件 （{
            选择器：'应用程序登录'，
            templateUrl: './signup.component.html',
            styleUrls: ['./signup.component.css'],
            提供者：[注册服务]
        })

        导出类 SignUpComponent 实现 OnInit {
         公共模型：任何= []；
            构造函数（私有_resterservie：RegisterService，私有路由器：路由器）{}    


            ngOnInit () {

            }

            登记（）
            {
              this._resterservie.registerUser(this.model)
                。订阅（
                  数据 => {
                    console.log("成功");
                  },
                  错误=> {
                    console.log("错误");
                  }
                )   
            }


        }

注册 html

              <div class="form-group">
                  <input type="text" name="tTitle" [(ngModel)]="model.tTitle" #tTitle = "ngModel"  placeholder="Teacher Title" class="form-control" id="tTitle" />
              </div>
              <div class="form-group">
                  <label id="tq1"><strong>Q1:</strong>What is your Birth Date</label>
                  <input type="text" name="tans1" [(ngModel)]="model.tans1" #tans1 = "ngModel"  placeholder="Security Q1" class="form-control" id="tans1" />
              </div>
              <div class="form-group">
                  <label id="tq2"><strong>Q2:</strong> What is your favourite Sports:</label>
                  <input type="text" name="tans2" [(ngModel)]="model.tans2" #tans2 = "ngModel"  placeholder="Security Q2" class="form-control" id="tans2" />
              </div>
              <div class="form-group">
                  <label id="tq3"><strong>Q3:</strong> What is your favourite Color:</label>
                  <input type="text" name="tans3" [(ngModel)]="model.tans3" #tans3 = "ngModel"  placeholder="Security Q3" class="form-control" id="tans3" />
              </div>
              <div class="form-group">
                  <select class="form-control" id="tSignUpType" name="tsignUpType" [(ngModel)]="model.tsignUpType" #tsignUpType = "ngModel">
                      <option>ADMIN</option>
                      <option>TEACHER</option>

                  </select>
              </div>
              <div class="form-group">
                  <input type="text" name="Email" [(ngModel)]="model.Email" #Email = "ngModel"  placeholder="Email" class="form-control" id="tSignUpEmail" />
              </div>

              <div class="form-group" style="position:relative">
                  <div id="pas-mismatch" style="color: red; position: absolute; top: -18px;"></div>
                  <input type="password"  name="password" [(ngModel)]="model.password" #password = "ngModel"  placeholder="Password" class="form-control" id="tSignUpPassword" />
              </div>
              <div class="form-group">
                  <input type="password" name="password2" [(ngModel)]="model.password2" #password2 = "ngModel"  placeholder="Retype password" class="form-control" id="tconfirmpassword" />
              </div>
              <div class="form-group">
                  <input type="submit" name="signup_submit" class="btn btn-primary"  value="Sign up" id="SignUpbtn" />
                  <button class="btn btn-primary signIn">Sign In</button>
              </div>
              <div class="alert alert-success successful_alert" style="display:none;">
                  Successfully Created your Account, You can login Now!
              </div>

          </form>

用户界面

     导出界面用户{
                        'tsignUpUserid'：字符串；
                        'tsignUpDisplayName'：字符串；
                        'tschoolid'：字符串；
                        'tschoolName'：字符串；
                        'tschoolAd1'：字符串；
                        'tschoolAd2'：字符串；
                        'tschoolZip'：字符串；
                        'tschoolCity'：字符串；
                        'tschoolState'：字符串；
                        'tTitle'：字符串；
                        'tq1'：字符串；
                        'tq2'：字符串；
                        'tq3'：字符串；
                        'tans1'：字符串；
                        'tans2'：字符串；
                        'tans3'：字符串；
                        'tsignUpType'：字符串；
                        'tsignUpPassword'：字符串；
                        'tSignUpEmail'：字符串；

            }

标签： angular

Answer 1

看起来您缺少 .pipe。如下更新您的代码。

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) => response)
    );
}

另请注意：
1.请检查您是否真的需要对用户对象进行字符串化。如果您的 api 以这种方式接受它，您可以直接传递 json 对象。2.你不需要在服务类中实现'OnInit'。