My problem involves sending three variables to my HTML template, but it only recognizes one of them.

The HTML template I am using looks like this:

<div class="page-data">
    <form method="post" action="api/roles/edit/{{role?.ID}}" name="{{role?.ID}}">

        <table cellpadding="11">
            <tr>
                <div class="label"> Role Name </div>
                    <input type="text" name="role_name" value="{{role?.ROLE_NAME}}">
                <br>
                <br>
                <div class="label"> Description</div>
                    <input type="text" name="description" value="{{role?.DESCRIPTION}}">

                <br>
                <br>
                <div class="label" *ngIf="role?.ACTIVE_FLAG === 'Y'"> Active Record </div>
                    <input type="radio" name="active_flag" value="Y" checked> Active
                    <input type="radio" name="active_flag" value="N"> Inactive
                <div *ngIf="role?.ACTIVE_FLAG === 'N'">
                    <input type="radio" name="active_flag" value = "Y"> Active
                    <input type="radio" name="active_flag" value= "N" checked> Inactive
                </div>
                <br>
                <br>
            </tr>
        </table>

        <div class="label"> Active Modules</div>
        <select id="modules_applied" name="module_name">
            <option value="none"> None</option>
            <option *ngFor="#module of modules" value="{{module.MODULE_NAME}}">{{module.MODULE_NAME}}</option>
        </select>

        <div class="data-table">

            <table id="modules_table" border="1" cellpadding="7" cellspacing="7"></table>

            <br>
            <br>

        </div>
        <div class="label"> Inactive Modules </div>
        <select id="new_mods_select" name="new_modules">
            <option value="none"> None</option>
            <option *ngFor="#module of new_modules" value="{{module.MODULE_NAME}}">{{module.MODULE_NAME}}</option>
        </select>
        <div class="data-table">

            <table id="new_modules_table" border="1" cellpadding="7" cellspacing="7"></table>

            <br>
            <br>
        </div>
        <input type="submit" name="submit" value="Save">
    </form>
</div>

and The component file:

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';
import {RouteParams, RouterLink} from 'angular2/router';


@Component({
  selector: 'edit_role',
  providers: [RoleService],
  directives: [CORE_DIRECTIVES],
  templateUrl: 'app/roles/edit_role.html'
})
export class RoleEdit implements OnInit{

    role: any;
    modules: any;
    new_modules: any;
    params: any;

    constructor(private _roleService: RoleService, params:RouteParams){
        this.params = params.get('id');
    };

    ngOnInit(){
        this.getEditRoles(this.params);
    };

    getEditRoles(id){
        this._roleService.getEditRoles(id).subscribe(role_edit =>
            {this.role = role_edit.data[0],
            this.modules = role_edit.modules[0],
            this.new_modules = role_edit.new_modules[0]},
            error => {
                console.log('error logged:');
                console.log(error);
            }
        );
    };
}

The error message I received is:

Cannot find a differ supporting object '[object Object]' in [modules in RoleEdit@29:11]

I recently discovered the use of question marks for async calls with: {{role?.ID}}. It seems that ngFor loops do not work well with them, which might be the source of my issue. Thank you!

Edit:

Here is more of the code, including what is in my roles services and the JSON data I am working with.

The role.services file:

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

@Injectable()
export class RoleService {


    constructor(public http: Http) {

    }

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

    getEditRoles(id){
        return this.http.get('http://localhost:3000/api/roles/edit/' +id)
            .map((response => response.json()))
    }
}

And here is the JSON data I am trying to capture:

{
  new_modules: [
    {
      MODULE_NAME: "user_roles"
    }
  ],
  modules: [
     {
      ROLE_ID: 6,
      MODULE_NAME: "roles",
      INSERT_ALLOWED_FLAG: "Y",
      UPDATE_ALLOWED_FLAG: "N",
      DELETE_ALLOWED_FLAG: "N",
      QUERY_ONLY: "Y"
    },
    {
      ROLE_ID: 6,
      MODULE_NAME: "test_mod",
      INSERT_ALLOWED_FLAG: "Y",
      UPDATE_ALLOWED_FLAG: "N",
      DELETE_ALLOWED_FLAG: "N",
      QUERY_ONLY: "N"
    },
    {
      ROLE_ID: 6,
      MODULE_NAME: "users",
      INSERT_ALLOWED_FLAG: "Y",
      UPDATE_ALLOWED_FLAG: "Y",
      DELETE_ALLOWED_FLAG: "Y",
      QUERY_ONLY: "Y"
    }
  ],
 data: [
    {
      ID: 6,
      ROLE_NAME: "Fire",
      DESCRIPTION: "Something hot",
      ACTIVE_FLAG: "Y"
    }
  ]
}