我的HTML模板未在Angular2中收到我所有的组件变量

Question

So my issue is I have 3 variables I would like to send to my html template but it only ever picks up one of them.

My html template 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 my component

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

My error

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

I just learned about the question marks for async calls with: {{role?.ID}}. It does look like ngFor loops don't like those though, and I think that is most likely where my problem is. Thanks!

Edit:

So here is more of the code, what is in my role.services, and my JSON.

Here is my role.services

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 my JSON 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"
    }
  ]
}

Answer 1

Referring to and crediting this answer it appears that you may be missing the

.map(res => res.json())

for your Http request. Since your code snippets do not include the getEditRoles code in the RoleService I cannot confirm that this is in fact missing. But my suspicion is that you are using making the Http request and then returning it. Your code for that method should be something like to following for it to work:

public getEditRoles(id: number): Observable<any>{
    return this.http.get('some.url', {id: id})
               .map(res => res.json());
}

This will ensure that the Response object from the Http call gets converted into JSON for use in your component.

Update

With your updated question I now see some discrepancies in your code. In your component you have this line

this.modules = role_edit.modules[0]

Which means that you are assigning the array modules the value of the first object in the modules array of your json.

So at this moment this.modules would have a value of

{
  ROLE_ID: 6,
  MODULE_NAME: "roles",
  INSERT_ALLOWED_FLAG: "Y",
  UPDATE_ALLOWED_FLAG: "N",
  DELETE_ALLOWED_FLAG: "N",
  QUERY_ONLY: "Y"
}

Which then you are attempting to iterate over, but as it is not an array, the framework errors.

For this to work as you expect change

this.modules = role_edit.modules[0]

to

this.modules = role_edit.modules

Which will assign the entire array to this.modules instead of only the first item.