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返回小写，因此，

没有告诉我任何事情。我用小写写的界面解决了。

杰森：

    export interface IRecipe {

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

}

界面：

-webkit-background-size: cover;

没有在angular2和asp核心中显示列表

1 个答案: