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

回答

相關問題