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

Question

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

我的 angular 服务创建了一个 9 列，但没有显示 angular 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>

更新

网络 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 return 是小写，所以

不给我看任何东西。我把界面写成小写就解决了。

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;

}

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

Not showing list in angular2 and asp core

angular2-services

angular