遇到 HTTP 请求 + ngFor 问题

Question

我正在用 node 构建一个项目，并且刚刚开始用 Angular2 构建前端！

我的问题是我无法让它接收或显示数据，我不完全确定它在哪里崩溃，因为我还不确定如何自行调试 angular。

这是我遇到的错误。

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)

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

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

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

我认为这无关紧要，但我也会 post 我的模拟 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"
        }
    ]
}

到目前为止，学习 angular 一直都有些挑战。特别是因为当前 angular2 版本没有太多准确的参考资料供我参考。非常感谢任何帮助，谢谢！！

Answer 1

您只是从 json 响应中严重提取了您的列表。您应该 return 数据属性。最好的位置，直接在服务中：

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

遇到 HTTP 请求 + ngFor 问题

Having trouble with HTTP request + ngFor

angular

angular2-services