Angular 2 View not displaying data from Webservice

Question

I have a web service that provides some user data (this is the Java backend), and I have an Angular component:

import { Component,state,style,animate,transition, trigger, keyframes, 
OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/pluck';

import { IUser } from './user.interface';

@Component({
  moduleId: module.id,
  selector: 'user-cmp',
  templateUrl: 'user.component.html'
})
export class UserComponent {

  user: Observable<IUser>;

  errorMessage: string;

  constructor(private _userService: ActivatedRoute){
    this.user = _userService.data.pluck('user');
  }

}

I am using Resolver:

import { Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable'
import { Observer } from 'rxjs/Observer';

import { IUser } from './user.interface';
import { UserService } from './user.service';
import {Injectable} from "@angular/core";

@Injectable()
export class UsersResolver implements Resolve<IUser> {

  constructor (private _userService: UserService) {}

  resolve(): Observable<IUser>{
    return this._userService.getUser();
  }
}

Resolver uses the service:

import {Injectable} from "@angular/core";
import { Http, Response } from "@angular/http";

import { IUser } from './user.interface';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class UserService {
  private _userUrl = 'http://localhost:8000/rest/users';

  constructor(private _http: Http){

  }

  getUser(): Observable<IUser>{
    return this._http.get(this._userUrl)
      .map((response: Response) => {
        return <IUser> response.json();
      })
      .do(data => console.log('All: ' + JSON.stringify(data)))
      .catch(this.handleError);
  }

  private handleError (error: Response){
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
  }
}

And finally, View:

<div class="main-content" >
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card" [@carduserprofile]>
                    <div class="header">
                        <h4 class="title">Edit User Profile</h4>
                    </div>
                    <div *ngIf="user" class="content">
                        <form>
                            <div class="row">

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" class="form-control" placeholder="Username" value="{{user.username }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="email" class="form-control" placeholder="Email" value="{{user.password}}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone</label>
                                        <input type="text" class="form-control" placeholder="Phone" value="{{user.telephone}}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Type</label>
                                        <input type="text" class="form-control" disabled placeholder="User type" value="{{user.type}}">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-info btn-fill pull-right">Update Profile</button>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The module is as follows:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { MODULE_COMPONENTS, MODULE_ROUTES } from './dashboard.routes';
import { UsersResolver } from './user/user.resolver';

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forChild(MODULE_ROUTES)
    ],
    declarations: [ MODULE_COMPONENTS ],
    providers: [ UsersResolver ]
})

export class DashboardModule{}

And also part of the route is as follows:

{ path: 'user', component: UserComponent, resolve: {user: UsersResolver} },

I did not embed some useless pieces of code, such as animation, etc. My problem is that it prints data from webservide using .do in the service, but nothing is displayed in the view. The fields are empty.

I use * ngIf in case of empty user data from WS.

I have no idea why, and also I don’t know how to implement some codes to check it in the view.

Any help would be great! Thanks in advance.

Answer 1

, , :

constructor(private _userService: ActivatedRoute){
  this.user = _userService.data.pluck('user');
}

this.user , , ( this.user.subscribe(...)), , async.

, :

constructor(private _userService: ActivatedRoute){
  this.user = _userService.snapshot.data['user'];
}

, JS-, . :

<div *ngIf="user" class="content">