0

所以我的问题是我有 3 个变量要发送到我的 html 模板，但它只会选择其中一个。

我的 html 模板看起来像这样。

<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>

和我的组件

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

我的错误

在 [RoleEdit@29:11 中的模块] 中找不到不同的支持对象“[对象对象]”

我刚刚了解了异步调用的问号：{{role?.ID}}。看起来 ngFor 循环确实不喜欢那些，我认为这很可能是我的问题所在。谢谢！

编辑：

所以这里有更多代码，我的 role.services 和我的 JSON 中有什么。

这是我的角色。服务

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

这是我试图捕获的JSON 。

{
  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"
    }
  ]
}
4

1 回答 1

1

参考并记入此答案，您似乎可能错过了

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

为您的 Http 请求。由于您的代码片段不包含getEditRoles代码中的代码，因此RoleService我无法确认这实际上是缺失的。但我怀疑您正在使用发出 Http 请求然后返回它。该方法的代码应该类似于以下内容才能使其工作：

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

这将确保Response来自 Http 调用的对象被转换为 JSON 以在您的组件中使用。

更新

随着您更新的问题，我现在看到您的代码中存在一些差异。在您的组件中，您有这条线

this.modules = role_edit.modules[0]

这意味着您正在为数组分配json 数组中modules第一个对象的值。modules

所以此时此刻this.modules的值为

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

然后您尝试对其进行迭代，但由于它不是数组，因此框架错误。

让它按你期望的那样工作

this.modules = role_edit.modules[0]

至

this.modules = role_edit.modules

这会将整个数组分配给this.modules而不是仅分配第一项。

于 2016-02-02T20:14:03.087 回答