2

私はノードでプロジェクトを構築しており、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)

これが私の役割コンポーネントです（* 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()
            });
    }
}

これはあまり重要ではないと思いますが、モック 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 ビルドについて、私が従うのに正確なリファレンスがあまりないためです。どんな助けでも大歓迎です、ありがとう!!

4

1 に答える 1

2

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);
    }
}
于 2016-01-31T00:46:17.870 に答える