Angular 2 视图不显示来自 Web 服务的数据

Question

我有一个提供一些用户数据的Web服务(这是Java后端(，我有一个Angular组件：

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

我正在使用解析器：

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

解析程序正在使用服务：

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

最后是视图：

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

该模块如下所示：

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

路线的部分也是这样的：

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

我没有粘贴代码中一些无用的部分，例如动画等。我的问题是，它使用服务中的 .do 打印来自 webservide 的数据，但它在视图中没有显示任何内容。字段为空。

我在WS的空白用户数据的情况下使用*ngIf。

我不知道为什么，也不知道如何实现一些代码来在视图中检查它。

任何帮助都会很棒！提前谢谢。

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