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

Resolver正在使用服务：

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的数据，但它在View中没有显示任何内容。字段是空白的。

如果来自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">

Angular 2查看不显示来自Webservice的数据

1 个答案: