未在angular2和asp核心中显示列表

Question

我在Asp.Net Core中有Web API 2的Angular 2应用程序。

我的角度服务创建一个9列，但没有显示名称或项目的描述在角度的HTML文件。

有什么问题？我怎么解决这个问题？

接口：

export interface IRecipe { 

    Id: number; 
    Name: string; 
    Description: string; 
    Iamge: string; 

} 

服务：

import { OnInit, Component } from '@angular/core'; 
import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { IRecipe } from "./IRecipe" 
import 'rxjs/Rx'; 

@Injectable() 

export class RecipeService { 

    constructor(private http: Http) { } 

    private url: string = "http://localhost:2560/api/sampledata/RecipesList"; 
    getStudentList() { 
     let data: Observable<IRecipe[]> = this.http.get(this.url) 
      .map(res => <IRecipe[]>res.json()) 
      .catch(this.handleError); 
     return data; 
    } 
    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

TS：

import { RecipeService } from "./Service/RescipeService"; 
import { IRecipe } from "./Service/IRecipe"; 
import { Component, OnInit } from '@angular/core'; 
import { Http, Response, RequestOptions, Headers } from '@angular/http'; 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'Recipes', 
    template: require('./Recipes.html'), 
    styles: [require('./Recipes.css')] 
}) 

export class RecipesComponent implements OnInit { 

    constructor(private recipesservice: RecipeService) { } 

    recipes: IRecipe[]; 
    errormessage: any; 

    ngOnInit() { 
     this.recipesservice.getStudentList() 
      .subscribe(
      recipes => this.recipes = recipes, 
      error => this.errormessage = <any>error); 
    } 
} 

HTML：

<div class="col-md-5"> 
    <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes"> 
     <div class="pull-left"> 
      <h4 class="list-group-item-heading">{{recipe.Name}}</h4> 
      <p class="list-group-item-text">{{recipe.Description}}</p> 
     </div> 
     <!--<span class="pull-right"> 
      <img class="img-responsive" 
       src="{{recipe.Image}}" 
       style="max-height: 50px;" /> 
     </span>--> 
    </a> 
</div> 
<div class="col-md-7"> 
    Recipes Detail 
</div> 

更新

的Web API：

[HttpGet("[action]")] 
    public IEnumerable<Recipes> RecipesList() 
    { 
     List<Recipes> recipes = new List<Recipes>(); 
     for (int i = 0; i <= 9; i++) 
     { 
      Recipes res = new Recipes(); 
      res.Id = i; 
      res.Name = string.Format("Kisnoush {0}", i + 1); 
      res.Description = "It's Very Good Book . you Must Read it"; 
      res.Image="Image"; 
      recipes.Add(res); 
     } 
     return recipes; 
    } 

Answer 1

我写这篇文章的界面大写但JSON回报小写，因为这个原因，它

没有告诉我任何事情。我用小写字母编写接口。

JSON：

[{"id":0,"name":"Kisnoush 1","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":1,"name":"Kisnoush 2","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":2,"name":"Kisnoush 3","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":3,"name":"Kisnoush 4","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":4,"name":"Kisnoush 5","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":5,"name":"Kisnoush 6","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":6,"name":"Kisnoush 7","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":7,"name":"Kisnoush 8","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":8,"name":"Kisnoush 9","description":"It's Very Good Book . you Must Read it","image":"Image"} 
,{"id":9,"name":"Kisnoush 10","description":"It's Very Good Book . you Must Read it","image":"Image" 
}] 

接口：

export interface IRecipe { 

    id: number; 
    name: string; 
    description: string; 
    image: string; 

}