0
我有一个关于在Angular2如何观测工作的问题..我目前使用以下.subscribe在角2通过服务从发布到服务器的组件数据
@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
我有一个ADDUSER分量使用用户服务的方法将数据发布到服务器。我能够实现这一点，但是对组件文件将数据发送到服务方法时发生的情况有疑问。 我已经导入了所需的软件包。下面是一个发送形式的数据服务的方法
addUser.component.ts
export class AddUser{
addUserForm:FormGroup;
value:any;
constructor(private userService: UserService,private formBuilder: FormBuilder) {
this.addUserForm = this.formBuilder.group({
name:['',Validators.required],
age:['',Validators.required],
email:['',Validators.required]
});
}
submit(value){
this.userService.addUser(value).subscribe(data => {
// refresh the list
console.log(data)
return true;
},
error => {
console.log(error);
});
}
}
方法下面是在该服务用于将请求发送到服务器
user.service方法。 TS
import {Injectable} from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/cache';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs';
@Injectable()
export class UserService{
_userInfoData: Observable<any>;
private addUserUrl = 'http://localhost:8080/addUser';
constructor(private http: Http){ }
addUser(body: Object): Observable<any>{
console.log(body)
let bodyString = JSON.stringify(body)
let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
let options = new RequestOptions({ headers: headers }); // Create a request option
return this.http.post('http://localhost:8080/addUser', body, options) // ...using post request
.map((res:Response) => res.json()) // ...and calling .json() on the response to return data
.catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}
}
我的问题是，当我在addUser.component.ts删除.subscribe from the submit method请求调用服务方法addUser(body: Object): Observable<any>但服务方法不会发布到服务器。
addUser.component.ts
submit(value){
this.userService.addUser(value)
}
任何人都可以请帮我理解这背后
更新观念：
@Denko：你是正确的他并没有叫这两个功能但只有错误
submit(value){
this.userService.addUser(value).subscribe(data => {
// refresh the list
console.log(data)
return true;
},
error => {
console.log(error);
});
}
这是什么让我吨他错误TypeError:error.json is not a function
更新2
@Denko ...感谢帮助我在这里...下面是与类的组件文件。
addUser.component.ts
export class AddUser{
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
addUserForm:FormGroup;
value:any;
constructor(private userService: UserService,private formBuilder: FormBuilder) {
this.addUserForm = this.formBuilder.group({
name:['',Validators.required],
age:['',Validators.required],
email:['',Validators.required]
});
}
submit(value){
this.userService.addUser(value).subscribe(data => {
// refresh the list
console.log(data)
return true;
},
error => {
console.log(error);
});
}
}
下面是一个用来创建Ajax请求到服务器
user.service.ts
import {Injectable} from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/cache';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs';
@Injectable()
export class UserService{
_userInfoData: Observable<any>;
private addUserUrl = 'http://localhost:8080/addUser';
constructor(private http: Http){ }
addUser(body: Object): Observable<any>{
console.log(body)
let bodyString = JSON.stringify(body)
let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
let options = new RequestOptions({ headers: headers }); // Create a request option
return this.http.post('http://localhost:8080/addUser', body, options) // ...using post request
.map((res:Response) => res.json()) // ...and calling .json() on the response to return data
.catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}
}
每当服务文件我命中服务方法的请求正确传递到服务器，我能够创建一个用户，但它总是进入错误块，并引发下面的错误....
TypeError:error.json is not a function
我想指出的是，在服务方法catch块不叫，直到服务器不可用，但在这个类里面的error块总是被调用，即使请求经过服务器.....我在这里丢失或做错了什么
如果可观察到的没有任何用户，也不会提出请求 – echonax
谢谢你的答案 – Apoorv