Angular 4 HTTP Not Returning JSON body

我在我的手稿中有以下方法！Angular 4 HTTP Not Returning JSON body

allPowerPlants(onlyActive: boolean = false, page: number = 1): PowerPlant[] { 
    const params: string = [ 
     `onlyActive=${onlyActive}`, 
     `page=${page}` 
    ].join('&'); 
    const path = `${this.allPowerPlantsURL}?${params}`; 
    this.apiService.get(path).map(
     powerplants => { 
     powerplants.map(item => { 
      if (this.isPowerPlant(item)) { 
      // make the item an instance of PowerPlant 
      this.powerPlants.push(item as PowerPlant); 
      } 
     }); 
    }, 
    err => { 
     console.log('oops **** some error happened'); 
     // handle error 
    }); 
    console.log('powerplants obtained is *****************+ '); 
    console.log(this.powerPlants); 
    return this.powerPlants; 
    }

我get方法是這樣的：

import { Injectable } from '@angular/core'; 
import { environment } from '../../environments/environment'; 
import { Headers, Http, Response, URLSearchParams } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class ApiService { 
    loading: boolean; 
    data: Object; 
    constructor(
    private http: Http, 
) {} 


    get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> { 
     console.log('sending request to ' + `${environment.api_url}${path}`); 
     return this.http.get(`${environment.api_url}${path}`, { search: params }) 
      .catch(this.formatErrors) 
      .map((res: Response) => { 
      console.log('response as json is ' + res.json()); 
      res.json(); 
     }); 
     } 
}

我isPowerPlant方法是這樣的：

isPowerPlant(item: any): item is PowerPlant { 
    // check for the required properties of PowerPlant here and return true/false. 
    // example: 
    console.log('in the static method'); 
    const vvvv = item['maxPower'] && item['minPower']; 
    console.log(vvvv); 
    return vvvv; 
    }

我期待看到的console.log一些數據（「響應因爲json是'），但奇怪的是它沒有打印任何東西！該請求甚至沒有將其發送到服務器！

然而，當我改變我的allPowerPlants方法不映射在GET方法，而是認購象下面這樣：

this.apiService.get(path).subscribe(...)

我可以看到一些數據是從服務器獲取，因爲我從我的服務器日誌中看到該請求正在被服務。

我要做到以下幾點：

我想allPowerPlants返回我定義爲低於發電廠的數組：

export interface PowerPlant { 
    powerPlantId: number; 
    powerPlantName: string; 
    minPower: number; 
    maxPower: number; 
    powerPlantType: string; 
    rampRateInSeconds?: number; 
    rampPowerRate?: number; 
}

現在，因爲我的GET方法是可觀察到的，我看到我的角度應用程序正在噸，噸呼叫服務器的，因爲它可以從我的服務器日誌中看到：

[info] application - GET /powerPlants?onlyActive=false&page=1 took 3192ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2974ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2701ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2682ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2885ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2920ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2552ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2564ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2598ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2612ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2615ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2621ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2636ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2609ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2701ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2544ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2588ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2532ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2586ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2570ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2652ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2624ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2661ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2618ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2611ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2624ms HTTP status >> 200 
[info] application - GET /powerPlants?onlyActive=false&page=1 took 2620ms HTTP status >> 200

這是實際的數據，我的服務器發送：

[ { 
    "powerPlantId" : 1, 
    "powerPlantName" : "Organization-001", 
    "minPower" : 20, 
    "maxPower" : 100, 
    "powerPlantType" : "OnOffType" 
}, { 
    "powerPlantId" : 2, 
    "powerPlantName" : "Organization-001", 
    "minPower" : 100, 
    "maxPower" : 800, 
    "rampPowerRate" : 100, 
    "rampRateInSeconds" : 100, 
    "powerPlantType" : "RampUpType" 
}, { 
    "powerPlantId" : 3, 
    "powerPlantName" : "Organization-002", 
    "minPower" : 200, 
    "maxPower" : 400, 
    "rampPowerRate" : 50, 
    "rampRateInSeconds" : 50, 
    "powerPlantType" : "RampUpType" 
}, { 
    "powerPlantId" : 4, 
    "powerPlantName" : "Organization-002", 
    "minPower" : 400, 
    "maxPower" : 800, 
    "powerPlantType" : "OnOffType" 
} ]

如何讓我的allPowerPlants只調用我的服務器一次，但同時處理get方法的Observable結果？

這是我如何利用數據在我的HTML：

<div class="ui grid posts"> 
    <app-powerplant 
    *ngFor="let powerPlant of allPowerPlants()" 
    [powerPlant]="powerPlant"> 
    </app-powerplant> 
</div>

來源

2017-08-30 sparkr

你從未說過什麼this.http是....是新的HttpClient還是舊的Http？ –

我已更新我的帖子！ – sparkr

這裏是你的代碼中調用一個片段來自服務器的數據

this.apiService.get(path).map(
     powerplants => { 
     ... 
      }

停在那裏。沒有數據的原因是你沒有訂閱它！你應該這樣做

this.apiService.get(path).subscribe(
     powerplants => { 
     this.powerPlants = powerplants 
     //remove the mapping. you can do it in your service. 
    }, 
    err => { 
     console.log('oops **** some error happened'); 
     // handle error 
    });

而且在服務

get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> { 
     console.log('sending request to ' + `${environment.api_url}${path}`); 
     return this.http.get(`${environment.api_url}${path}`, { search: params }) 
      .catch(this.formatErrors) 
      .map((res: Response) => { 
      <PowerPlant[]> res.json(); 
     }); 
     }

請注意，我的映射可能是錯誤的，因爲你沒有表現出返回的數據的實際值。

希望這會有所幫助。

來源

2017-08-30 11:15:53 brijmcq

我編輯了我的帖子以顯示我從服務器獲得的數組 – sparkr

好吧但它似乎不映射數據！當我在我的allPowerPlants方法中使用console.log（this.powerPlants）時，我將其視爲未定義 – sparkr

您會查看我的更新後的帖子嗎？ – sparkr

OK，有很多的例子在線上如何處理HTTP請求，在這裏噸....

通常你有一個get方法服務難道沒有使用保留字像GET打電話給你的方法 ...你的情況是，你的情況getAllPowerplants

，API服務看起來很好（除了方法名稱）

然後在組件上，你有這樣的事情

this.apiService.getAllPowerplants.subscribe(data => { 
    console.log(data); 
});

，顯然訂閱它只有一次（ngOnInit是個好地方），把它

來源

2017-08-30 11:01:26

我想你錯過了我的觀點！我只訂閱一次，但我不明白爲什麼多次撥打電話到後端服務器！ – sparkr

Angular 4 HTTP Not Returning JSON body

回答

相關問題