简体   繁体   中英

Angular2. Can't set class property

I begin learning of angular2 and I have a problem. There is some class

export class UserComponent {
  user: User;
  errorMessage: string;

  constructor(
     private usersService: UsersService,
     private route: ActivatedRoute
  ) {
     let id = +route.params._value.id;
     this.usersService.getUser(id).subscribe(
        user => this.user = user,
        error => this.errorMessage = <any>error
     );
  console.log(this);
}

I can see property "user" in console, but not "errorMessage". http://screen.mindklab.com/incoming/82c673e18ae8f89d7c6175a57c33.png

If I change console.log(this) to console.log(this.user) I get "undefined" in console. Why class' own property doesn't changed? Because of this I can't use "user" in template

this is service class:

@Injectable()
export class UsersService {
private usersUrl = 'http://gye.hz/component/chart/fixscripts?task=';

constructor(private http: Http) {}

getUsers(): Observable<User[]> {
    return this.http
        .get(this.usersUrl+'getUsers')
        .map((r: Response) => r.json().data);
}

getUser(id: number): Observable<User> {
    return this.http
        .get(this.usersUrl+'getUser&id='+id)
        .map((r: Response) => r.json().data);
}

saveUser(user: User): Observable<User> {
    let body = JSON.stringify(user);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http
        .post(this.usersUrl+'saveUser', body, options)
        .map((r: Response) => r.json().data);
}
}

Service returns necessary data (it is shown in console), but it isn't written to property

I think you're missing some error handling in your service.

   getUser(id: number): Observable<User> {
        return this.http
            .get(this.usersUrl+'getUser&id='+id)
            .map((r: Response) => r.json().data)
            .catch(error => this.onError(error)); <!-- NEW -->
    }

    onError(error: any) {

        //Log error?

        let errMsg = error.message || 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM