Angular2はOdataコントローラからデータを取得します

Question

初めての質問...長時間の読者/ lurker ... 私はangular2を学習しようとしていますが、odataコントローラからデータを取得する際に問題があります。私はodataコントローラから返されたいくつかのデータをhtmlのリスト要素にロードしようとしている単純な角度2のアプリケーションを持っています。ここ
は私のangular2インタフェースである：ここで

interface Menu { 
    id: number; 
    name: string; 
    route: string; 
    decorator: string; 
    description: string; 
    OldTableId: string; 
    TableName: string; 
} 

は私のtypescriptです/角度2コンポーネントファイルです：

import { 
    ROUTER_DIRECTIVES, 
    Http, 
    Observable, 
    MenuService, 
    Component, OnInit 
} from './index.ts'; 

@Component({ 
    selector: 'sidebar-menu', 
    template: require('./sidebar-menu.html'), 
    directives: [...ROUTER_DIRECTIVES], 
    providers: [MenuService] 
}) 
export class SidebarMenu { 
    public menus: Menu[]; 
    public menu2s: Menu[]; 
    constructor(private _menuService: MenuService) { 
    } 
    ngOnInit() { 
     this._menuService.getMenus() 
      .subscribe((menus) => { 
       this.menus = menus; 
       console.log(val); 
       }, 
      (err) => { 
       console.log(err); 
       } 
      ); 
    } 
} 

ここでは、角2コンポーネントの初期化中に呼び出される私のangular2サービス（menuService）がされています。

import { Http, Response, Observable, Injectable} from './index.ts' 

@Injectable() 
export class MenuService { 

    constructor(private _http: Http) { } 

    getMenus() { 
     //return this._http.get('/api/Menu/Menus') - api works fine 
     return this._http.get('http://localhost:64157/odata/OldTables') 
      .map((response: Response) => response.json()) 

      .catch(this._handleError); 

    } _handleError(err: any) { 
     //TODO - Give user a nice error message. 
     console.log(err); 
     return Observable.throw(err); 
    }; 
    } 

} 

そして、私のHTML：

<ul class='nav navbar-sidebar'> 
    <li>test</li> 
    <li> 
     <a [routerLink]="['/home']" class="router-link" [routerLinkActive]="['active']"> 
      <span class='glyphicon glyphicon-home'></span> Home 
     </a> 
    </li> 
    <li *ngFor="let menu of menus" > 
     <a [routerLink]="menu.name" class="router-link" [routerLinkActive]="['active']"> 
      <span class='glyphicon glyphicon-th-list {{menu.decorator}}'></span> {{menu.name}} 
     </a> 
    </li> 
</ul> 

私の問題は、私がAPIコントローラを使用すると、これが機能することです。今私はodataコントローラを作成しました。コンポーネントのinitからconsole.log(val);というコンソールにログが記録されると、ブラウザのデータが表示されます。しかし、私は画面上でこれを得ることはできません。最終的には、htmlページの<li *ngFor="let menu of menus" >にあるデータを使用したいと思います。 odataコントローラのデータをレンダリングするにはどうすればよいですか？私が読んだことはすべてWeb APIを参照しています。

編集：odataコントローラが返すデータのサンプルを追加しています。

{ 
     "odata.metadata":"http://localhost:64157/odata/$metadata#OldTables","value":[ 
     { 
      "OldColumns@odata.navigationLinkUrl":"http://localhost:64157/odata/OldTables(15252)/OldColumns","OldTableId":15252,"TableName":"addbook" 
     },{ 
      "OldColumns@odata.navigationLinkUrl":"http://localhost:64157/odata/OldTables(15253)/OldColumns","OldTableId":15253,"TableName":"adj01" 
     },{ 
      "OldColumns@odata.navigationLinkUrl":"http://localhost:64157/odata/OldTables(15254)/OldColumns","OldTableId":15254,"TableName":"allcmy201" 
     },{ 
      "OldColumns@odata.navigationLinkUrl":"http://localhost:64157/odata/OldTables(15255)/OldColumns","OldTableId":15255,"TableName":"allfut" 
     } 
     ] 
    } 

Answer 1

私のコードは正常に動作しました返されたデータの「値」を参照するのを忘れてしまいました。 更新TS /コンポーネント・コード：

export class SidebarMenu { 
    public menus: Menu[]; 

    constructor(private _menuService: MenuService) { 
    } 
    ngOnInit() { 
     this._menuService.getMenus() 
      .subscribe((menus) => { 
       this.menus = menus.value; 
       console.log(val.value[0]); 
       }, 
      (err) => { 
       console.log(err); 
       } 
      ); 
    } 
} 

その後を次のように私のhtmlを修正：

<ul> 
    <li *ngFor="let menu of menus"> 
     <a [routerLink]="menu.OldTableId" class="router-link" [routerLinkActive]="['active']"> 
      <span class='glyphicon glyphicon-th-list {{menu.OldTableId}}'></span> {{menu.TableName}} 
     </a> 
    </li> 
</ul>