Having trouble with HTTP request + ngFor
<p>I am building a project with node and am just starting to build the front end with Angular2! </p>

<p>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.</p>

<p>Here is the error I have been getting.</p>

<pre><code>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 &lt;anonymous&gt; (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:10897:14), &lt;anonymous&gt;: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)
</code></pre>

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

<pre><code>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: `
      &lt;div class ="data-table"&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;th style="width:35%"&gt;Role&lt;/th&gt;
                &lt;th style="width:35%"&gt;Description&lt;/th&gt;
                &lt;th style="width:15%"&gt;Active&lt;/th&gt;
                &lt;th style="width:120px"&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor="#role of role_list"&gt;
                &lt;td&gt;{{role.ID}}&lt;/td&gt;
                &lt;td&gt;{{role.ROLE_NAME}}&lt;/td&gt;
                &lt;td&gt;{{role.DESCRIPTION}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    `
})
export class Roles implements OnInit{

    role_list: Array&lt;any&gt;;

    constructor(private _roleService: RoleService){
    };

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

    getRoles(){
        this._roleService.getRoles().subscribe(roles =&gt;  this.role_list = roles);
    };
}
</code></pre>

<p>And My Role.services is -</p>

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

@Injectable()
export class RoleService {

    roles: Array&lt;any&gt;;

    constructor(public http: Http) {

    }

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

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

<pre><code>{
    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"
        }
    ]
}
</code></pre>

<p>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!!</p>