Question

所以这是一个奇怪的问题，我无法解决问题，我想其中的一部分与我有关，不知道角度的异步调用，但我们走了！

我正在检索我想要的json数据，但我的变量并没有抓住它，我完全迷失了原因。

这是我的 edit_role.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 =>
            //console.log(role_edit.data[0])
            {this.role = role_edit.data[0],
            this.modules = role_edit.modules[0],
            this.new_modules = role_edit.new_modules[0]}
        );
    };
}

我的 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) { 
    }

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

我的 edit_role.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}}>

                <div class="label"> Description</div>
                    <input type="text" name="description" value={{role.DESCRIPTION}}>

                <div class="label"> Active Record </div>
                <div *ngIf="role.ACTIVE_FLAG === 'Y'">
                    <input type="radio" name="active_flag" value="Y" checked> Active
                    <input type="radio" name="active_flag" value="N"> Inactive
                </div>
                <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>
            </tr>
        </table>
    </form>
</div>

这是我测试atm的唯一html因此它没有使用modules / new_modules 我的错误

无法阅读财产＆＃39; ID＆＃39; RoleEdit @ 1：21中的[api / roles / edit / {{role.ID}}中未定义的内容

我的数据

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

我知道这个错误是由于我的角色，模块和new_modules 没有收到任何数据。奇怪的是，当我执行console.log（role_edit.data [0]）时，它会检索我的json数据。

所以我认为有两个问题，一个是我的HTML在收到请求之前加载，在加载之前崩溃了我的html。另一部分是，即使我可以控制我的数据，我也无法将其存储在变量中。

Answer 1

Angular 2期望所有绑定属性都不会被定义。在你的情况下，role首先是未定义的，然后在之后加载。值得庆幸的是Angular团队已经想到了这一点，并引入了一种有助于此的语法。

示例：

{{role?.ID}}

这将防止错误发生，并且只会显示任何内容，直到定义，然后它将显示ID的值

因此，此HTML应解决您遇到的问题

<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}}> <div class="label"> Description</div> <input type="text" name="description" value={{role?.DESCRIPTION}}> <div class="label"> Active Record </div> <div *ngIf="role?.ACTIVE_FLAG === 'Y'"> <input type="radio" name="active_flag" value="Y" checked> Active <input type="radio" name="active_flag" value="N"> Inactive </div> <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> </tr> </table> </form>

变量不保存angular2中的json数据

1 个答案: