Question

我是Spring MVC和Angular 2的新手。我一直致力于构建一个Web应用程序作为辅助项目。我已经能够成为一个Spring MVC应用程序，但我想迁移到Angular 2前端。我已经按照Angular.io上的快速启动程序进行了操作，似乎没有问题。下一步是获取角度服务以从我的Spring MVC REST控制器检索数据。

我已经能够成功地向控制器发送GET以检索用户列表，并且Controller发送回应用程序/ json对象。问题是用户没有出现在浏览器中。我没有在lite-server窗口中看到任何错误，我不知道如何解决数据未显示的原因。你能帮忙找到我的问题吗？

UserComponent.ts：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

import { User }              from './user';
import { UserService }       from './user.service';
import { Role }              from '../roles/role';

@Component({

    templateUrl: '/app/users/user.component.html',
    providers: [ UserService]
})
export class UserComponent implements OnInit {
      errorMessage: string;
      users: User[];
      mode = 'Observable';
      constructor (private userService: UserService) {}

      ngOnInit() { this.getUsers(); }

      getUsers() {
        this.userService.getUsers()
                         .subscribe(
                           users => this.users = users,
                           error =>  this.errorMessage = <any>error);
      }

    }

UserComponent.html：

<h2>My User Component Page</h2>

    <h3>Users:</h3>
    <ul>
      <li *ngFor="let user of user">
        {{user.username}}
      </li>
    </ul>
    <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

User.service.ts：

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { User }           from './user';
import { Observable }     from 'rxjs/Observable';
@Injectable()
export class UserService {
  constructor (private http: Http) {}
  private usersUrl = 'http://serverIP/labtool/users';  // URL to web API
  getUsers (): Observable<User[]> {
    return this.http.get(this.usersUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }
  private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

Wireshark Screenshot showing the returned array:

用户类：

import { Role } from '../roles/role'
export class User {
  constructor(
    public id: number,
    public firstname: string,
    public lastname: string,
    public username: string,
    public password: string,
    public email: string,
    public enabled: boolean,
    public roleid:  Role) { }
}

更新

我能够使用Chrome开发人员工具在浏览器中显示数据到达那里，但数据未在组件页面中呈现。以下是Chrome中网络标头的数据。与请求和答案的编码差异是否有问题？

从Spring MVC REST控制器返回数据，该控制器托管在Eclipse中的Tomcat 8服务器上。 Angular 2前端正在运行Lite-server，并使用VS Code进行编辑。我还没想出如何将两个项目合并在一起。那会晚些。

此外，如果我从Chrome浏览器复制响应数据并在InMemoryBackendService和InMemoryDataService中使用它（如angular.io网站上的英雄教程），则数据会显示在组件中。格式似乎很好，但不确定为什么来自REST控制器的数据没有在组件页面中填充。

General:
Request URL:http://<server IP>/labtool/users
Request Method:GET
Status Code:200 OK
Remote Address:10.133.137.55:80


Response Headers:
Access-Control-Allow-Origin:*
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Type:application/json;charset=UTF-8
Date:Thu, 07 Jul 2016 10:27:01 GMT
Expires:0
Pragma:no-cache
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block


Request Headers:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:<server IP>
Origin:http://localhost:3000
Pragma:no-cache
Referer:http://localhost:3000/users
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

我现在在控制台中收到此异常。我看过其他帖子建议使用Pipe将JSON对象转换为数组，以便在* ngFor模板中使用。为什么user.service.ts中的getUsers（）过程没有处理它？我在程序中遗漏了什么，或者我是否必须使用管道？

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

在你的模板中，你有一个错字。而不是变量users，而是仅使用user来循环。

<ul>
  <li *ngFor="let user of users">
    {{user.username}}
  </li>
</ul>

Answer 2

我找到了答案。我要感谢George Saadeh和他的博客。这就是我找到答案的地方。 Falafel软件博客 http://blog.falafel.com/working-http-introduction-angular2

有两个问题。第一个是我的user.ts文件被配置为类而不是接口。这是最终的user.ts文件

export interface User {
     id: number;
     firstname: string;
     lastname: string;
     username: string;
     password: string;
     email: string;
     enabled: boolean;
     roleid:  {id: number, role: string}
}

第二个是user.service.ts文件中的函数，getUsers（）需要将响应映射到数组User []

getUsers(): Observable<User[]> {
  return this.http.get(this.usersUrl)
    .map((response: Response) => <User[]>response.json())
    .catch(this.handleError);
}

Answer 3

在UserComponent.html您的*ngfor指令中，您使用＆＃39;让用户＆＃39;而不是让用户的用户＆＃39;如UserComponent.ts文件

中所述

<h2>My User Component Page</h2>

<h3>Users:</h3>
<ul>
  <li *ngFor="let user of users">
    {{user.username}}
  </li>
</ul>
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

JSON数据未显示在Angular 2组件中

3 个答案: