Angular 4 Tour of Heroes：Part 6（Master Detail sample），not working when using REST api

我下载了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完全相同。感谢所有回复。

来源

2017-06-13 cybernet123

你确定你的php代码正在返回数据吗？尝试使用Fiddler来检查响应。 –

我可以看到你传入的英雄参数选择了heroService getHero方法，但实际上将参数传递给其余api的位置在哪里？你不应该把Id作为url参数附加到getdatadetails.php端点吗？（ex.?id=hero_id）。 – effy

不知何故，您需要将ID发送到您的休息端点，我不知道您的其余api路由是如何设置的，但正如您在getHero方法的第一行中所看到的，英雄的Id附加到了url，由于您为英雄细节url创建了一个新变量，因此请确保您更改方法以使用您的新变量以及以您的休息端点期望的方式附加英雄的Id，或者作为角度的一部分例如或作为路线参数。 – effy

英雄对象永远不会从主人传递到细节，只有选中的英雄ID才能在heroes.component.ts的第54行中看到，路由器将导航到细节路线并传入选定的英雄ID。

当细节组件启动时，它会让英雄服务使用从主服务器通过URL传入的英雄ID从API获取英雄，正如您可以看到英雄详情.component.ts中的第38行，英雄直到调用subscribe函数才会在细节组件中可用，这意味着其他API请求已完成并返回了英雄。

我建议你将hero-details.component.ts中的第40行替换为.subscribe(hero => {this.hero = hero, console.log("here's the hero!:", this.hero);});，一旦完成了api请求，你就会在控制台中看到英雄。

如果您的其余API返回数组，则需要选择第一个元素（在索引0处）。

来源

2017-06-13 22:35:55 effy

Angular 4 Tour of Heroes：Part 6（Master Detail sample），not working when using REST api

回答

相关问题