Greetings as a first-time question asker and long-time reader/lurker. I've been delving into learning angular2, but I'm facing some challenges when it comes to retrieving data from an odata controller. In my simple Angular 2 application, I'm attempting to load data returned from the odata controller into a list element in HTML.
Below is the interface for my Angular2:
interface Menu {
id: number;
name: string;
route: string;
decorator: string;
description: string;
OldTableId: string;
TableName: string;
}
Here's my TypeScript/Angular 2 component file:
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);
}
);
}
}
In addition, here's my Angular2 service (MenuService) called during the initialization of the Angular 2 component:
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);
};
}
}
Now, let's move on to the 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>
The challenge arises when using an API controller that functions properly, but switching to an odata controller presents issues. While I can visualize the data in the browser through the log at console.log(val); within the component's initialization, I struggle to display it on the screen. My end goal is to utilize the data within the
<li *ngFor="let menu of menus" >Edit: Adding a glimpse of the data retrieved by my odata controller:
{
"odata.metadata":"http://localhost:64157/odata/$metadata#OldTables","value":[
{
"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e01222a0d21223b23203d0e212a2f3a2f60202f3827292f3a272120022720251b3c22">[email protected]</a>":"http://localhost:64157/odata/OldTables(15252)/OldColumns","OldTableId":15252,"TableName":"addbook"
},{
"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77381b1334181b021a1904371813160316591916011e1016031e18193b1e191c22051b">[email protected]</a>":"http://localhost:64157/odata/OldTables(15253)/OldColumns","OldTableId":15253,"TableName":"adj01"
},{
"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d29dbeb691bdbea7bfbca192bdb6b3a6b3fcbcb3a4bbb5b3a6bbbdbc9ebbbcb987a0be">[email protected]</a>":"http://localhost:64157/odata/OldTables(15254)/OldColumns","OldTableId":15254,"TableName":"allcmy201"
},{
"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="024d6e66416d6e776f6c71426d666376632c6c63746b6563766b6d6c4e6b6c6957706e">[email protected]</a>":"http://localhost:64157/odata/OldTables(15255)/OldColumns","OldTableId":15255,"TableName":"allfut"
}
]
}