我的service.ts不會將數據返回到component.ts

Question

我的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);
    }
}

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

我的ftp-request.ts

export class FTPRequest {
    FTPRequestId: number;
    CreatorId: number;
    FTPRequestDate: string;
    FTPURL: string;
    FTPRequestComments: string;
    NickName: string;
}

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>

我的Web API服務按預期工作 - 它返回

並且已經使用AngularJS測試了Web服務 - 按預期工作。

所以，我的問題是：我從JSON格式的Web API服務獲取數據。 我可以在調試中看到它們。 由於某種原因，我的“ftp-requests.component.ts”沒有從ftp-request.service.ts接收數據。

是的，我在我的app.module.js中導入了HttpModule，JsonpModule。 我的網絡面板看起來很好：

有人能發現問題嗎？

Answer 1

問題是你試圖在獲取之前顯示getFTPRequests()數據。 簡單的*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>

Answer 2

問題在於：

getFTPRequests(): Promise<FTPRequest[]> {
    return this.http.get(this.APIFTPRequestsURL)
            .toPromise()
            .then(response => response.json().data as FTPRequest[])
            .catch(this.handleError);
}

當我檢查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);
}

感謝JB Nizet和Stefan Svrkota的答案！