Jsonオブジェクトの角2とTypescriptを使ってJsonオブジェクトを取得する

Question

`こんにちは、 Visual Studio 2015 .net Core、Angular 2 & TypescriptのWeb APIからJSONデータを取得するにはいくつかの助けが必要です。/wwwroot/libsのAngular2フォルダ。

私はAngular 2のhttp.get（）を使用しています。 get（）関数の結果は、未定義の値を表示します...なぜですか？

そこが私のファイルです：

Folders

[API] [2]

CustomersController.cs =>アクセスOK経由http://localhost:45149/api/customers/ => [{...}、{ ...}、{...}]

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; 
    } 
} 

customer.ts

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

customer.service.ts

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

customer.component.ts

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")); 
}} 

app.module.ts

// 
*** 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 { } 

app.component.ts

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

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

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

ありがとうございました。

Answer 1

大文字でプロパティにバインドしようとしているときに、あなたのサーバーがcamel-casingで応答をシリアル化するように見えます。

シリアライザの設定を別の形式に変更する場合は、次の記事を参照してください。Web API serialize properties starting from lowercase letter

そうしないと、あなたは、ブラウザ上で開発者向けツールで、ネットワークタブの「GET」リクエストを見ることができる角度側