Angular2 получить данные от контроллера Odata

Question

Вопрос в первый раз ... Долго читатель/lurker ... Я пытаюсь изучить angular2, но у меня возникают проблемы с получением данных от контроллера odata. У меня есть простое угловое приложение, в котором я пытаюсь загрузить некоторые данные, возвращаемые с контроллера odata, в элемент списка в html.
Вот мой angular2 интерфейс:

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

Вот моя машинопись/Угловой файл 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); 
       } 
      ); 
    } 
} 

Вот мой angular2 обслуживание (menuService) вызывается в INIT углового 2 компонента:

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. Я могу видеть данные в браузере, когда он регистрируется в консоли по адресу console.log(val); из инициализации моего компонента. Но я не могу получить это на экране. Ультимативно я хочу использовать данные на странице <li *ngFor="let menu of menus" > на странице html. Как я могу получить данные контроллера 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>