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