Angular 2组件中未显示JSON数据 [英] JSON Data not being displayed in Angular 2 component

问题描述

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

I new to Spring MVC and Angular 2. I have been working on building a web application as a side project. I have been able to get pretty far as a Spring MVC app but I wanted to migrate to an Angular 2 front end. I have followed the quick start procedures on the Angular.io and seem to be doing okay. The next step is to get the angular service to retrieve data from my Spring MVC REST controller.

我已经能够成功地将GET发送到控制器以检索用户列表，并且Controller发送回一个application/json对象.问题是用户没有出现在浏览器中.我在lite-server窗口中没有看到任何错误，也不确定如何解决未显示数据的问题.你能帮我找到问题吗?

I have been able to successfully send a GET to the controller to retrieve a list of users and the Controller sends back an application/json object. The problem is that the users are not showing up in the browser. I am not seeing any errors in the lite-server window and I am not sure how to troubleshoot why the data is not getting displayed. Can you help find my issue?

UserComponent.ts:

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:

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:

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屏幕截图显示了返回的数组:

用户类别:

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中网络标头的数据.问与答的编码差异是否存在问题?

I was able to use the Chrome developer tools to show in the browser that the data is getting there, but the data is not being rendered in the component page. Below is the data from the Network Headers in Chrome. Is there a problem with the encoding differences with the Request and Answer?

数据是从Eclipse中的Tomcat 8服务器上托管的Spring MVC REST控制器返回的. Angular 2前端在lite服务器上运行，并使用VS Code进行了编辑.我还没有弄清楚如何将两个项目合并在一起.那会晚一点.

The data is being returned from a Spring MVC REST controller that is hosted on a Tomcat 8 server in Eclipse. The Angular 2 front end is running off a lite-server and is edited with VS Code. I haven't yet figured out how to merge the two projects together. That will come later.

此外，如果我从Chrome浏览器复制响应数据并在InMemoryBackendService和InMemoryDataService中使用它(例如angular.io网站上的Heroes教程)，则该数据确实会显示在组件中.格式化似乎很好，但是不确定为什么从REST控制器中提取的数据没有填充到组件页面中.

Additionally, if I copy the Response Data from the Chrome browser and use it in the InMemoryBackendService and InMemoryDataService (like the Heroes Tutorial on the angular.io web site) the data does show up in the component. Formatting seems to be fine, but not sure why the data from the REST controller is not getting populated in the component page.

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()过程已经不处理了?我在程序中遗漏了某些东西还是必须使用管道?

I am now getting this exception in the console. I have seen other posts suggesting use of a Pipe to convert the JSON object to an array for use in the *ngFor template. Why doesn't the getUsers() procedure in the user.service.ts take care of it already? Am I missing something in my procedure or do I have to use a Pipe?

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

推荐答案

我找到了答案.我要向乔治·萨德(George Saadeh)和他的博客致谢.那是我找到答案的地方. 沙拉三明治软件博客 http://blog.falafel.com/working-http-introduction-angular2

I found the answer. I need to send a thank you to George Saadeh and his blog. That is where I found the answer. Falafel Software Blog http://blog.falafel.com/working-http-introduction-angular2

有两个问题.首先是将我的user.ts文件配置为类而不是接口. 这是最终的user.ts文件

There were two issues. The first was that my user.ts file was configured as a class and not as an interface. Here is the final user.ts file

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

The second was that the function in the user.service.ts file, getUsers() needed to map the response to the array User[]

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

这篇关于Angular 2组件中未显示JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！