我是 Angular 新手，目前正在致力于实现注册功能。但是，当我尝试发送 POST 请求时，遇到以下错误：'错误：“发布有效请求。”'
您能否检查一下我的代码并帮助我确定可能出了什么问题？
服务
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);
}
}
注册组件
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");
}
)
}
}
注册html
<form id="signUp" #SignUpForm = "ngForm" (ngSubmit) ="register()" name="form">
<div class="form-group">
<input type="text" name="tuserid" [(ngModel)]="model.tuserid" #tuserid = "ngModel" placeholder="UserID" class="form-control" id="tSignUpuserid" />
</div>
<div class="form-group">
<input type="text" name="tdisplayname" [(ngModel)]="model.tdisplayname" #tdisplayname = "ngModel" placeholder="Display Name" class="form-control" id="tSignUpDisplayName" />
</div>
<div class="form-group">
<input type="text" name="tschoolid" [(ngModel)]="model.tschoolid" #tschoolid = "ngModel" placeholder="School ID" class="form-control" id="tschoolid" />
</div>
<div class="form-group">
<input type="text" name="tschoolname" [(ngModel)]="model.tschoolname" #tschoolname = "ngModel" placeholder="School Name" class="form-control" id="tschoolname" />
</div>
<div class="form-group">
<input type="text" name="tschooladd1" [(ngModel)]="model.tschooladd1" #tschooladd1 = "ngModel" placeholder="School Addresss 1" class="form-control" id="tschoolad1" />
</div>
<div class="form-group">
<input type="text" name="tschooladd2" [(ngModel)]="model.tschooladd2" #tschooladd2 = "ngModel" placeholder="School Addresss 2" class="form-control" id="tschoolad2" />
</div>
<div class="form-group">
<input type="text" name="tschoolcity" [(ngModel)]="model.tschoolcity" #tschoolcity = "ngModel" placeholder="School City" class="form-control" id="tschoolcity" />
</div>
<div class="form-group">
<input type="text" name="tschoolstate" [(ngModel)]="model.tschoolstate" #tschoolstate = "ngModel" placeholder="School State" class="form-control" id="tschoolstate" />
</div>
<div class="form-group">
<input type="number" name="tschoolZipCode" ngModel placeholder="School Zip Code" class="form-control" id="tschoolZcode" />
</div>
<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>
</div>
</form>
用户界面
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;
}
看起来您缺少 .pipe。更新您的代码如下。
registerUser(user: User): Observable<any> {
return this.http.post(this.posts_Url, user)
.pipe(
map((response: Response) => response)
);
}
另请注意：
1. 请检查您是否确实需要字符串化用户对象。如果你的 api 接受这种方式，你可以直接传递 json 对象。
2. 你不需要在服务类中实现'OnInit'。
在服务器配置中添加 Access-Control-Allow-Origin 或在处理程序文件中添加以下标头。
此示例适用于 php。
<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
?>
这是常见问题之一，请评论您从浏览器控制台收到的错误。
请在您的帖子请求中添加
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()
);
您的
registerUser(user: User)Userpublic model: User;
你也可以先初始化
public model: User = {};
尝试这种格式
registerUser(user: User): Observable<any> {
return this.http.post(this.posts_Url, user)
.pipe(
map((response: Response) =>{ return response.map(i=>
(i), )
}))