0

したがって、私の問題は、html テンプレートに送信したい 3 つの変数がありますが、そのうちの 1 つしか取得できないことです。

私の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 です。

これが私の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()))
    }
}

そして、これが私がキャプチャしようとしている私の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());
}

これにより、Http 呼び出しからのオブジェクトが確実Responseに JSON に変換され、コンポーネントで使用できるようになります。

アップデート

更新された質問により、コードにいくつかの矛盾が見られます。コンポーネントには、この行があります

this.modules = role_edit.modules[0]

これは、jsonの配列の最初のオブジェクトの値を配列 に割り当てていることを意味します。modulesmodules

したがって、この時点で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 に答える