第一次提问...长期读者/潜伏者...
我正在尝试学习 angular2,但从 odata Controller 获取数据时遇到一些问题。我有一个简单的 Angular 2 应用程序,我试图将从 odata Controller 返回的一些数据加载到 html 中的列表元素中。
这是我的 angular2 界面:
interface Menu {
id: number;
name: string;
route: string;
decorator: string;
description: string;
OldTableId: string;
TableName: string;
}
这是我的 typescript /Angular 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);
}
);
}
}
这是我在 Angular 2 组件的 init 中调用的 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 Controller 时,它可以工作。现在我已经创建了一个 odata Controller 。当数据记录到控制台 console.log(val);
时,我可以在浏览器中看到数据。从我的组件的 init.但我无法将其显示在屏幕上。最终我想使用 <li *ngFor="let menu of menus" >
中的数据html 页面的。如何获取呈现的 odata Controller 数据?我读过的所有内容都引用了 Web api。
编辑:我正在添加我的 odata Controller 返回的数据示例。
{
"odata.metadata":"http://localhost:64157/odata/$metadata#OldTables","value":[
{
"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d699bab295b9baa3bbb8a596b9b2b7a2b7f8b8b7a0bfb1b7a2bfb9b89abfb8bd83a4ba" rel="noreferrer noopener nofollow">[email protected]</a>":"http://localhost:64157/odata/OldTables(15252)/OldColumns","OldTableId":15252,"TableName":"addbook"
},{
"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83ccefe7c0eceff6eeedf0c3ece7e2f7e2adede2f5eae4e2f7eaecedcfeaede8d6f1ef" rel="noreferrer noopener nofollow">[email protected]</a>":"http://localhost:64157/odata/OldTables(15253)/OldColumns","OldTableId":15253,"TableName":"adj01"
},{
"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26694a4265494a534b4855664942475247084847504f4147524f49486a4f484d73544a" rel="noreferrer noopener nofollow">[email protected]</a>":"http://localhost:64157/odata/OldTables(15254)/OldColumns","OldTableId":15254,"TableName":"allcmy201"
},{
"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fdb29199be92918890938ebd92999c899cd3939c8b949a9c89949293b1949396a88f91" rel="noreferrer noopener nofollow">[email protected]</a>":"http://localhost:64157/odata/OldTables(15255)/OldColumns","OldTableId":15255,"TableName":"allfut"
}
]
}
最佳答案
上面的代码有效,我只是忘记引用返回数据的“值”。 更新了 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>
关于Angular2从Odata Controller 获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38883259/