[英]My service.ts doesn't return data to component.ts
My ftp-request.service.ts 我的ftp-request.service.ts
import {Injectable} from '@angular/core';
import {FTPRequest} from './ftp-request';
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class FTPRequestService {
private APIFTPRequestsURL = '../api/APIFTPRequests';
constructor(private http: Http) {
}
getFTPRequests(): Promise<FTPRequest[]> {
return this.http.get(this.APIFTPRequestsURL)
.toPromise()
.then(response => response.json().data as FTPRequest[])
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
My ftp-requests.component.ts 我的ftp-requests.component.ts
import { Component, Input, OnInit } from '@angular/core';
import {Pipe} from '@angular/core';
import { FTPRequest } from './ftp-request';
import { FTPRequestService} from './ftp-requests.service';
@Component({
selector: 'ftp-requests',
templateUrl: 'app/FTPRequests/ftp-requests.component.html',
providers: [FTPRequestService]
})
export class FTPRequestsComponent implements OnInit {
ftprequests: FTPRequest[];
constructor(private ftpRequestService: FTPRequestService) { }
getFTPRequests(): void {
this.ftpRequestService.getFTPRequests().then(ftprequests => this.ftprequests = ftprequests);
}
ngOnInit(): void {
this.getFTPRequests();
}
}
my ftp-request.ts 我的ftp-request.ts
export class FTPRequest {
FTPRequestId: number;
CreatorId: number;
FTPRequestDate: string;
FTPURL: string;
FTPRequestComments: string;
NickName: string;
}
ftp-requests.component.html FTP-requests.component.html
<div class="container-fluid">
<h1>FTP Requests</h1>
<div class="row">
<table class="table">
<tr *ngFor="let ftp of ftprequests">
<td>{{ftp.NickName| capitalize}}</td>
<td>{{ftp.FTPRequestId}}</td>
<td>{{ftp.FTPRequestDate}}</td>
<td>{{ftp.FTPURL}}</td>
<td>{{ftp.FTPRequestComments}}</td>
</tr>
</table>
</div>
</div>
My Web API service works as expected - it returns 我的Web API服务按预期工作 - 它返回
And the web service has been tested with AngularJS - works as expected. 并且已经使用AngularJS测试了Web服务 - 按预期工作。
So, my question is: I am getting data from Web API service in JSON format. 所以,我的问题是:我从JSON格式的Web API服务获取数据。 I can see them in my debug.
我可以在调试中看到它们。 For some reason my "ftp-requests.component.ts" is not receiving data from ftp-request.service.ts.
由于某种原因,我的“ftp-requests.component.ts”没有从ftp-request.service.ts接收数据。
Yes, I am importing HttpModule, JsonpModule in my app.module.js. 是的,我在我的app.module.js中导入了HttpModule,JsonpModule。 And my network panel looks OK:
我的网络面板看起来很好:
Can somebody spot the problem? 有人能发现问题吗?
Problem is you are trying to display getFTPRequests()
data before it is fetched. 问题是你试图在获取之前显示
getFTPRequests()
数据。 Simple *ngIf
directive will solve all your problems: 简单的
*ngIf
指令将解决您的所有问题:
<div class="container-fluid">
<h1>FTP Requests</h1>
<div class="row" *ngIf="ftprequests">
<table class="table">
<tr *ngFor="let ftp of ftprequests">
<td>{{ftp.NickName| capitalize}}</td>
<td>{{ftp.FTPRequestId}}</td>
<td>{{ftp.FTPRequestDate}}</td>
<td>{{ftp.FTPURL}}</td>
<td>{{ftp.FTPRequestComments}}</td>
</tr>
</table>
</div>
The problem was in: 问题在于:
getFTPRequests(): Promise<FTPRequest[]> {
return this.http.get(this.APIFTPRequestsURL)
.toPromise()
.then(response => response.json().data as FTPRequest[])
.catch(this.handleError);
}
When I checked the promise callback - "EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. " I have changed getFTPRequests() to 当我检查promise回调时 - “EXCEPTION:找不到'对象'类型的不同支持对象'[object Object]'。NgFor只支持绑定到诸如Arrays之类的Iterables。”我已将getFTPRequests()更改为
getFTPRequests(): Promise<FTPRequest[]> {
return this.http.get(this.APIFTPRequestsURL)
.toPromise()
.then(response => response.json() as FTPRequest[])
.catch(this.handleError);
}
Thank you JB Nizet and Stefan Svrkota for your answers! 感谢JB Nizet和Stefan Svrkota的答案!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.