Question

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

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

以下是我遇到的错误。

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)

这是我的角色组件（如果我采取* ng For 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);
    };
}

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

我不认为这太重要了，但我也会在这里发布我的模拟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"
        }
    ]
}

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

Answer 1

你只是从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);
    }
}

遇到HTTP请求+ ngFor时遇到问题

1 个答案: