Not showing list in angular2 and asp core

Question

I have Angular 2 app with Web API 2 in Asp.Net Core.

My angular service create a 9 column but not showing name or description of the item in angular html file.

what's the problem ? how can I solve this problem?

Interface :

export interface IRecipe {

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

}

Service :

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>

Update

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

I write this interface uppercase but JSON return lowercase, for this reason, it

not show me any things. I write the interface by lowercase it solved.

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"
}]

interface :

    export interface IRecipe {

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

}