Json 角度2循环不显示

我没有得到任何错误，JSON是从后端返回的。 问题是，我在下面的代码中有没有做错什么

JSON

Home.Component.ts

import { Component, OnInit  } from "@angular/core";
import { HomeService } from './home.service';
import { Profile } from './profile';
import 'rxjs/add/operator/map';
@Component({
    moduleId: module.id,
    selector: "home-page",
    templateUrl: "home.component.html",
    styleUrls: ["home.component.css"],
    providers:  [ HomeService ]
})

export class HomeComponent implements OnInit {
    constructor(private service: HomeService) {}

    Profiles: Profile[];

    getProfile(): void {
        this.service
            .getData()
            .then(profiles => this.Profiles = profiles);

    }
    ngOnInit(){
        this.getProfile();
    }

}

Home.service.ts

import {Injectable  } from "@angular/core";
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Profile } from './profile';

@Injectable()
export class HomeService {
    private usersUrl = 'http://localhost:8888/';
    private headers = new Headers({'Content-Type': 'application/json'});
    constructor(private http: Http) {}

    getData(): Promise<Profile[]> {
        return this.http.get(this.usersUrl)
            .toPromise()
            .then(response => response.json().data as Profile[])
            .catch(this.handleError);

        //let err = new Error('Cannot get object of this type');

    }


    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Headers，Http，Response}；
导入“rxjs/add/operator/toPromise”；
从“/Profile”导入{Profile}；
@可注射（）
出口级家庭服务{
私有用户http://localhost:8888/';
私有头=新头（{'Content-Type'：'application/json'}）；
构造函数（私有http:http）{}
getData（）：承诺{
返回this.http.get（this.usersUrl）
.toPromise（）
.then（response=>response.json（）.data作为概要文件[]）
.接住（这个.把手错误）；
//让err=newerror（'无法获取此类型的对象'）；
}
私有句柄错误（错误：任意）：承诺{
console.error（'发生错误'，error）；//仅用于演示目的
返回承诺。拒绝（error.message | | error）；
}
}

home.component.html

主页


{{prof.name}

应该是

{{prof.Name}}

---

您的图片提示数组为空，带有：

...ng-for-of: null 

因此，除了Günther提到的

{{prof.name}}

应该是

{{prof.name}}

， 您的JSON包含

数据

，（大写），但在get请求中您使用的是

数据

。这实际上是区分大小写的，所以下面一行

.then(response => response.json().data as Profile[])

应该是：

.then(response => response.json().Data as Profile[])

---

这应该可以正确填充数组：）

问题在哪里？@MChaker，对不起，刚才是通过编辑添加的。我发布的代码中是否有任何明显的东西会导致它无法工作？

.then(response => response.json().data as Profile[])

.then(response => response.json().Data as Profile[])