Angular 2 Ansicht nicht die Anzeige von Daten von Webservice

Question

ich einen Web-Service haben, die einige Benutzerdaten bereitstellt (das ist Java-Backend) und ich habe eine Winkelkomponente:

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'); 
    } 

} 

ich ein Resolver bin mit:

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 ist mit einem 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'); 
    } 
} 

Und schließlich die Aussicht:

<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> 

Das Modul sieht wie folgt aus:

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{} 

Und auch der Teil der Route ist wie folgt:

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

ich nicht ein paar nutzlose Teile des Codes einfügen haben, wie Animationen und usw. Mein Problem ist, es druckt die Daten von der Webservide mit dem .do im Dienst, aber es zeigt nichts in der Ansicht. Felder sind leer.

Ich benutze * ngIf im Falle von leeren Benutzerdaten von WS.

Ich habe keine Ahnung warum und auch ich weiß nicht, wie Sie einige Codes implementieren, um es in der Ansicht zu überprüfen.

Jede Hilfe wird großartig! Vielen Dank im Voraus.

Answer 1

Das Problem sehe ich befindet sich hier:

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

this.user ist eine beobachtbare, so dass Sie es abonnieren benötigen Sie den Wert zu erhalten, entweder innerhalb der Komponente (mit this.user.subscribe(...)) oder in der Vorlage mit dem async Rohr.

Vielleicht nutzen Sie könnte einfach den Snapshot für die Route:

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

diese Weise kann der Benutzer ein rohes JS Objekt wäre und nicht eine beobachtbare. Also sollte folgendes besser sein:

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