Having trouble with HTTP request + ngFor

I am building a project with node and am just starting to build the front end with Angular2!

我正在用节点构建一个项目，我刚开始使用Angular2构建前端！

My problem is I can't get it to either receive or display data, I am not entirely sure where it's crashing as I am not sure how to go about debugging angular by myself yet.

我的问题是我无法接收或显示数据，我不完全确定它崩溃的地方，因为我不知道如何自己调试角度。

Here is the error I have been getting.

这是我得到的错误。

Error: Cannot find a differ supporting object '[object Object]'
at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8080:21)
at IterableDiffers.find (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2191:15)
at NgFor.Object.defineProperty.set [as ngForOf] (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:16069:48)
at AbstractChangeDetector.ChangeDetector_Roles_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:10897:14), <anonymous>:33:36)
at AbstractChangeDetector.detectChangesInRecords (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8824:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8807:12)
at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8877:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8811:12)
at AbstractChangeDetector._detectChangesContentChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8871:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8808:12)

Here is my Role Component(If I take *ngFor out it won't crash).

这是我的角色组件（如果我带* ngFor out它不会崩溃）。

import {Component} from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import {RoleService} from './services/roles.services';
import {OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({
  selector: 'role-list',
  providers: [RoleService],
  directives: [CORE_DIRECTIVES],
  template: `
      <div class ="data-table">
        <table>
            <tr>
                <th style="width:35%">Role</th>
                <th style="width:35%">Description</th>
                <th style="width:15%">Active</th>
                <th style="width:120px">Action</th>
            </tr>
            <tr *ngFor="#role of role_list">
                <td>{{role.ID}}</td>
                <td>{{role.ROLE_NAME}}</td>
                <td>{{role.DESCRIPTION}}</td>
            </tr>
        </table>
      </div>
    `
})
export class Roles implements OnInit{

    role_list: Array<any>;

    constructor(private _roleService: RoleService){
    };

    ngOnInit(){
        this.getRoles();
    };

    getRoles(){
        this._roleService.getRoles().subscribe(roles =>  this.role_list = roles);
    };
}

And My Role.services is -

而我的Role.services是 -

import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';

@Injectable()
export class RoleService {

    roles: Array<any>;

    constructor(public http: Http) {

    }

    getRoles(){
        return this.http.get('http://localhost:3000/api/roles/')
            .map((responseData) =>  {
                return responseData.json()
            });
    }
}

I don't think this matters too much, but I will post my mock Json data here as well.

我不认为这太重要了，但我也会在这里发布我的模拟Json数据。

{
    data: [
        {
            ID: 2,
            ROLE_NAME: "Molly Holly",
            DESCRIPTION: "Holy Moly",
            ACTIVE_FLAG: "Y"
        },
        {
            ID: 3,
            ROLE_NAME: "I'm a Red Button",
            DESCRIPTION: "I wonder what this will do",
            ACTIVE_FLAG: "Y"
        },
        {
            ID: 4,
            ROLE_NAME: "Water",
            DESCRIPTION: "Getting some water in",
            ACTIVE_FLAG: "Y"
        },
        {
            ID: 5,
            ROLE_NAME: "Earth",
            DESCRIPTION: "Can you smell what the Rock is Cookin?",
            ACTIVE_FLAG: "Y"
        },
        {
            ID: 6,
            ROLE_NAME: "Fire",
            DESCRIPTION: "Something hot",
            ACTIVE_FLAG: "Y"
        },
        {
            ID: 7,
            ROLE_NAME: "Heart",
            DESCRIPTION: "For weenies",
            ACTIVE_FLAG: "Y"
        }
    ]
}

Learning angular so far has been somewhat challenging so far. Especially because there are not too many references for the current angular2 build that are accurate for me to follow. Any help is very much appreciated, thanks!!

到目前为止，学习角度到目前为止一直有些挑战。特别是因为目前的angular2版本没有太多参考资料对我来说是准确的。非常感谢任何帮助，谢谢!!

1 个解决方案

#1

You simply badly extracted your list from json response. You should return the data property. The best location to this, is directly in the service :

你只是从json响应中严重提取了你的列表。您应该返回data属性。对此最好的位置是直接服务：

export class RoleService {
    roles: Array<any>;

    constructor(public http: Http) {
    }

    getRoles(){
        return this.http.get('http://localhost:3000/api/roles/')
            .map(response => response.json().data);
    }
}