Uhlové 4 zobrazovacie prvky zo sľubu - json, uhlové, http, psát, pozorovateľné

Mám nasledujúcu službu strojopisu (app.component.ts):

import { Component, OnInit } from "@angular/core";
import { ApiService } from "./shared/api.service";
import {PowerPlant} from "./shared/models/powerplant.model";
import "rxjs/add/operator/toPromise";

@Component({
selector: "app-root",
providers: [ApiService],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
// represents the URL"s
allPowerPlantsURL = "powerPlants";
// represents the data
powerPlants: PowerPlant[];

ngOnInit(): void {
this.allPowerPlants();
}

constructor(private apiService: ApiService) {
}

allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
const params: string = [
`onlyActive=${onlyActive}`,
`page=${page}`
].join("&");
const path = `${this.allPowerPlantsURL}?${params}`;
this.apiService.get(path)
.toPromise()
.then(elem => {
console.log("In the allPowerPlants");
console.log(elem); **// prints undefined here**
this.powerPlants = <PowerPlant[]> elem; }
)
.catch(this.handleError);
}

private handleError(error: any): Promise<any> {
console.error("An error occurred", error);
return Promise.reject(error.message || error);
}
}

Toto je môj app.component.html (iba zlomok kódu):

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

Teraz v mojom powerplant.component.html mám toto:

importovať {Component, Input, OnInit} z "@ angular / core"; importovať {PowerPlant} z "../shared/models/powerplant.model";

@Component({
selector: "app-powerplant",
templateUrl: "./powerplant.component.html",
styleUrls: ["./powerplant.component.css"]
})
export class PowerplantComponent implements OnInit {

@Input() powerPlant: PowerPlant;

constructor() { }

ngOnInit() {
}
}

A nakoniec, ten, ktorý má zobrazovať položky PowerPlant, je takýto:

<div class="four wide column center aligned votes">
<div class="ui statistic">
<div class="value">
{{ powerPlant.powerPlantId }}
</div>
<div class="label">
Points
</div>
</div>
</div>
<div class="twelve wide column">
<div class="value">
MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
</div>
<div class="value">
MaxPower: {{ powerPlant.maxPower }} MinPower: {{ powerPlant.minPower }}
</div>
<div class="value">
PowerPlantType: {{ powerPlant.powerPlantType }} Organization: {{ powerPlant.powerPlantName }}
</div>
</div>

Vidím, že server mi posiela pole, ako ukazuje nasledujúci protokol konzoly na metóde get:

  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(res.json());
res.json();
});
}

Kde ma riadkový riadok.log vytlačí, ako vidno na obrázku, nasledujúce:

Prečo je toPromise () neúspešné? Len pre informáciu, takto vyzerá môj model PowerPlant:

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

odpovede:

1 pre odpoveď č. 1

Existuje konkrétny dôvod na použitie toPromise() metóda? Funguje to pri bežnom prihlásení na odber?

Skúste to zmeniť

this.apiService.get(path)
.toPromise()
.then(elem => {
console.log("In the allPowerPlants");
console.log(elem); **// prints undefined here**
this.powerPlants = <PowerPlant[]> elem; }
)

do tohto :

this.apiService.get(path).subscribe(result => {
console.log("Im the result => ", result);
this.powerPlants = <PowerPlant[]> result;
});

---

Potom by to mohlo byť spôsobené tým, že nevrátite analyzovaný výsledok do svojho .map() spôsob, a preto nemôžete dostať odpoveď vo svojom sľube / predplatnom.

.map((res: Response) => res.json()); // return is inferred in this syntax


.map((res: Response) => {
return res.json(); // here it"s not
});

---

0 pre odpoveď č. 2

Týka sa to vášho ApiService, zabudli ste sa vrátiť res.json vo vašom .map

  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(res.json());
return res.json();
});
}

---