我下载了Angular Example - 英雄之旅:第6部分 - https://angular.io/tutorial/toh-pt6 并安装它,它工作正常。它使用内存中的web api。Angular 4 Tour of Heroes:Part 6(Master Detail sample),not working when using REST api
我想将它改为使用REST(JSON)API。
所以我做了以下修改。
app.module.ts 改变
InMemoryWebApiModule.forRoot(InMemoryDataService)
到
InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true})
英雄.service.ts 更改为
private heroesUrl ='api/heroes';
到
private heroesUrl = 'https://.../getdata.php
private heroesDetailsUrl = 'https://.../getdatadetails.php
母版视图是heros.component.html 详细信息视图是英雄details.component.ts
进行更改后,主视图工作正常,我查看主数据清单。 现在,当我从主视图中选择一行时 - 它进入详细信息视图,但我无法看到详细信息数据。 我试图打印英雄对象(包含在主控中选择的对象的详细信息,但始终显示为未定义在Javascript控制台中,并且我无法访问其任何属性。)
hero-details .components.ts
ngOnInit(): void {
console.log('inside hero-details.component');
console.log(this);
this.route.params
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
.subscribe(hero => this.hero = hero);
}
我需要改变,以便选择了马西德威反对被传递到详细信息视图? 样品完美地工作,如果我在inMemory网页API切换,但不会劳逸结合还有什么api。REST api返回的数据格式与inMemoryapi完全相同。 感谢所有回复。
你确定你的php代码正在返回数据吗?尝试使用Fiddler来检查响应。 –
我可以看到你传入的英雄参数选择了heroService getHero方法,但实际上将参数传递给其余api的位置在哪里?你不应该把Id作为url参数附加到getdatadetails.php端点吗? (ex.?id=hero_id)。 – effy
不知何故,您需要将ID发送到您的休息端点,我不知道您的其余api路由是如何设置的,但正如您在getHero方法的第一行中所看到的,英雄的Id附加到了url,由于您为英雄细节url创建了一个新变量,因此请确保您更改方法以使用您的新变量以及以您的休息端点期望的方式附加英雄的Id,或者作为角度的一部分例如或作为路线参数。 – effy