我有以下的打字稿服务(app.component.ts):角4个显示元素
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;
}
并没有多大的差别!这就是我得到 - 我的结果=>未定义 – sparkr
更新的答案,这可能是它。 –
是的!就是这样!凉!感谢您的建议! – sparkr