角4个显示元素

Question

我有以下的打字稿服务（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); 
    } 
} 

这是我app.component.html（只是从它的一个片段）：

现在

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

，在我powerplant.component.html，我有这样的：

进口{组件，输入的OnInit}从 '@角/核心'; 从'../shared/models/powerplant.model'导入{PowerPlant};

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

    @Input() powerPlant: PowerPlant; 

    constructor() { } 

    ngOnInit() { 
    } 
} 

最后，是应该显示动力项目的一个是这样的：

<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> 

我可以看到服务器发送我的阵列上得到下面的控制台日志方法显示：

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

哪里的console.log打印我就行了，按照如在截图中看到：

那么为什么toPromise（）失败？只是为了信息，这是我的动力模型看起来像：

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

Answer 1

是否有使用toPromise()方法的具体原因是什么？通常订阅时是否有效？

尝试修改此

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

这样：

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

---

那么它可能是因为你没有在你的.map()方法返回的解析结果，因此你不能在你的承诺/订阅中得到答复。

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


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

Answer 2

它关系到您在ApiService，你忘了你的.map

返回 res.json

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