首页 文章

Angular http请求

提问于
浏览
0

我是角色的新人 . 我正在创建注册功能,当我发布请求总是给出错误后发布有效请求“你能看到我的代码在哪里我做错了 .

services

import { Injectable, OnInit } from '@angular/core';
        import {HttpModule, Http,Response,Headers, RequestOptions,Request,RequestMethod} from '@angular/http';
        import 'rxjs/add/operator/map';
        import { Observable } from "rxjs/Rx";
        import { User } from './user';
        import { HttpClient,HttpHeaders, HttpRequest } from '@angular/common/http';


        @Injectable({
          providedIn: 'root'
        })
        export class RegisterService implements OnInit {

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

            constructor(private http: HttpClient) {

            }

            ngOnInit () {

            }

          registerUser(user:User) {     
             return this.http.post(this.posts_Url, JSON.stringify(user))
              .map((response: Response) => response);           
          }
        }

Signup component

import {Component, OnInit,Input} from '@angular/core'
        import { CommonService }  from '../../_common/services/common.service';
        import { CommonComponent }  from '../../_common/common.component';
        import { User } from '../../shared/user';
        import { RegisterService } from '../../shared/register.service';
        import { Router, RouterModule } from '@angular/router';
        import {HttpModule, Http,Response,Headers, RequestOptions} from '@angular/http';
        import {HttpClient, HttpErrorResponse} from '@angular/common/http';



        @Component ({
            selector: 'app-login',
            templateUrl: './signup.component.html',
            styleUrls: ['./signup.component.css'],
            providers:[RegisterService]
        })

        export class SignUpComponent  implements OnInit {
         public model:any = [];
            constructor (private _resterservie:RegisterService, private router:Router) {  }    


            ngOnInit () {

            }

            register()
            {
              this._resterservie.registerUser(this.model)
                .subscribe(
                  data => {
                    console.log("Successful");
                  },
                  error=> {
                    console.log("Error");
                  }
                )   
            }


        }

Signup 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>

user interface

export interface User {
                        'tsignUpUserid':string;
                        'tsignUpDisplayName':string;
                        'tschoolid':string;
                        'tschoolName':string;
                        'tschoolAd1':string;
                        'tschoolAd2':string;
                        'tschoolZip':string;
                        'tschoolCity':string;
                        'tschoolState':string;
                        'tTitle':string;
                        'tq1':string;
                        'tq2':string;
                        'tq3':string;
                        'tans1':string;
                        'tans2':string;
                        'tans3':string;
                        'tsignUpType':string;
                        'tsignUpPassword':string;
                        'tSignUpEmail':string;

            }

3 回答

  • 0

    请在您的帖子请求中添加 headers

    let headers = new Headers({ 'Content-Type': 'application/json' });
              let options = new RequestOptions({ headers: headers });
     return this.http.post(this.posts_Url, JSON.stringify(user),options)
              .map((response: Response) => <any>response.json());
    
  • 0

    看起来你错过了.pipe . 更新您的代码如下 .

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

    另请注意:
    1.请检查是否确实需要stringfy用户对象 . 如果api以这种方式接受,你可以直接传递json对象 . 你在服务类中没有't need to implement ' OnInit' .

  • 0

    您是否尝试将json发送到服务器并添加标头内容类型?我认为错误来自服务器服务器不接受请求,但如果没有,请与我们分享捕获或有关请求或控制台错误的信息 .

相关问题