使用angular 2&；从url（web api）获取Json对象；打字稿

`嗨， 我需要一些帮助从VisualStudio2015.NETCore、Angular2和Typescript上的web API获取JSON数据。/wwwroot/libs中的Angular2文件夹

我正在使用Angular 2的http.get（）。get（）函数的结果显示一个未定义的值。。。为什么?

这是我的文件：

[空气污染指数][2]

CustomersController.cs=>通过=>[{…}，{…}，{…}访问OK]

public class CustomersController : Controller
{
    // GET: api/customers 
    [HttpGet]
    public IList<Customer> Get()
    {
        var objects = new List<Customer>
        {
            new Customer { Id = 1, Log = "user01", Name = "user1" },
            new Customer { Id = 2, Log = "user02", Name = "user2" },
            new Customer { Id = 3, Log = "user03", Name = "user3" }
        };
        return objects;
    }
}

客户服务.ts

应用程序组件.ts

---

谢谢。

当您尝试绑定到具有大写名称的属性时，您的服务器似乎已设置为使用驼峰大小写序列化响应

如果要将序列化程序设置更改为使用其他格式，请查看以下文章：

---

否则，您可以绑定到角边的小写名称

您可以在浏览器的“开发者工具”中的“网络”选项卡上看到“获取”请求？？如果没有，请尝试导入ngModule中的“HttpModule”并删除“HTTP_PROVIDERS”，我在网络选项卡中看不到Get请求（inspect elements=>network）。。。我看到的只是Http get（）的响应，它可以到达URL，但值=>未定义中没有任何内容，当我初始化客户对客户的值时：Customer[]=[]；值为“array[0]log语句当前位于分配给this.customers的之前。如果将log语句放在分配之后，会记录什么？@hagner+1确定现在数组中有我的数据：但是get（）可能有问题函数服务器端的序列化程序似乎以小写形式返回变量。更改序列化程序设置以使用大写字母，或更改视图以绑定小写属性（customer.name）是否必须创建与服务器端类（api）相关的类或接口？如果没有，为什么要实现它？如果您只想显示它，那么不必为它创建类。如果您想，您可以使用类型为：any的变量来获取它，然后只绑定到模板中的正确属性。但是，只要您希望以任何方式在组件或指令中与它交互，就可以执行排序、fil或者类似的，你需要一个课程。

export class Customer {
constructor(
    public Id: number,
    public Log: string,
    public Name: string
    ){}
}

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Customer } from "./customer";
import "rxjs/Rx"

@Injectable()
export class CustomerService {
private baseUrl = "http://localhost:45149/api/customers/";  // web api URL
constructor(private http: Http) { }

getCustomers() {
    return this.http.get(this.baseUrl)
        .map(res => <Customer[]> res.json())
        .catch(error => {
            console.log(error);
            return Observable.throw(error);
        });
}}

import { Component, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { Customer } from './customer';
import { CustomerService } from './customer.service'

@Component({
selector: 'app-api',
template: ` 
<ul class="">
<li *ngFor="let customer of customers">
<span class=""> 
{{customer.Id}} </span> {{customer.Name}}
</li>
</ul>`,
    providers: [
            HTTP_PROVIDERS,
            CustomerService
    ] }) 

    export class CustomerComponent implements OnInit{
    api: string;
    public customers: Customer[];

    constructor(private customerService: CustomerService) {
    this.api = "API Customers"; 
}

ngOnInit() {
    this.customerService.getCustomers()
        .subscribe(
        customers =>
        {
            console.log(this.customers);
            this.customers = customers;
        },
        error => alert("error"));
}}

// 
*** Imports ***
//

@NgModule({
imports: [BrowserModule, routing], //other modules the app depends on
providers: [CustomerService],
declarations: [AppComponent,
HomeComponent,UploadComponent,CustomerComponent],
bootstrap: [AppComponent] // root component to bootstarp
})

export class AppModule { }

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app/app.component.html' // => SPA
})

export class AppComponent {
title = "App-root"
}