angular2页面抓取_json – 从Angular 2中的Web API获取数据

最新推荐文章于 2021-06-19 06:13:55 发布

原创最新推荐文章于 2021-06-19 06:13:55 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2页面抓取

在遵循Angular 2的'Tour of Heroes'教程后，作者创建了一个使用Entity Framework连接到数据库的简单应用。然而，从Web API获取的英雄列表在前端显示时，名称和ID为空。尽管在调试时看到this.heroes对象包含正确数据，但在界面上并未正确显示。问题出现在hero.service.ts和heroes.component.ts的交互中，具体原因需要进一步排查。

感谢Angular 2页面上的教程

“Tour of Heroes”,我设法创建了一个简单的Angular 2应用程序.然后使用Enitity Framework我决定创建一个数据库.并从中填充英雄列表(不是从文件中).我创建了Web Api Controller并添加了简单的get方法.

然后在hero.service.ts中我调用此方法以获取英雄列表.当我在我的应用程序午餐时,它会显示英雄列表,但没有任何值(名称和ID为空白).当我在浏览器中调试我的应用程序时,我可以看到heroes.component.ts中的this.heroes对象包含正确的数据.那么发生了什么？为什么没有显示名称和ID？

hero.service.ts：

import {Injectable} from 'angular2/core';

import {HEROES} from './mock-heroes';

import {Hero} from './hero';

import {Http, Response} from 'angular2/http';

import 'rxjs/Rx';

import {Observable} from 'rxjs/Observable';

@Injectable()

export class HeroService {

public values: any;

constructor(public _http: Http) { }

private _heroesUrl = 'http://localhost:61553/api/values'; // URL to web api

getHeroes() {

return this._http.get(this._heroesUrl)

.map(res => res.json())

.catch(this.handleError);

}

private handleError(error: Response) {

console.error(error);

return Observable.throw(error.json().error || 'Server error');

}

heroes.component.ts：

import {Component, OnInit} from 'angular2/core';

import {Router} from 'angular2/router';

import {Hero} from './hero';

import {HeroDetailComponent} from './hero-detail.component';

import {HeroService} from './hero.service';

@Component({

selector: 'my-heroes',

templateUrl: 'templates/heroes.component.html',

styleUrls: ['styles/heroes-component.css'],

directives: [HeroDetailComponent]

})

export class HeroesComponent implements OnInit {

constructor(private _heroservice: HeroService, private _router: Router) { }

errorMessage: string;

public heroes: Hero[];

selectedHero: Hero;

ngOnInit() {

this.getHeroes();

}

onSelect(hero: Hero)

{

this.selectedHero = hero;

}

getHeroes() {

this._heroservice.getHeroes()

.subscribe(

value => this.heroes = value,

error => this.errorMessage = error);

}

gotoDetail() {

this._router.navigate(['HeroDetail', { id: this.selectedHero.Id }]);

}

heroes.component.html：

My Heroes

{{hero.Id}} {{hero.Name}}

{{selectedHero.Name | uppercase}} is my hero

View Details

hero.ts：

export class Hero {

Id: number;

Name: string;

}

Web API控制器：

using Microsoft.AspNet.Mvc;

using System.Collections.Generic;

using TestApplicationDataAccess;

using TestApplicationDataAccess.Entities;

namespace WebApplication2.Controllers

{

[Route("api/[controller]")]

public class ValuesController : Controller

{

private readonly TestAppDbContext _dbContext;

public ValuesController(TestAppDbContext dbContext)

{

_dbContext = dbContext;

}

// GET: api/values

[HttpGet]

public IEnumerable Get()

{

return _dbContext.Heroes;

}

英雄实体：

namespace TestApplicationDataAccess.Entities

{

public class Hero

{

public int Id { get; set; }

public string Name { get; set; }

}

从WEB API Controller检索的JSON：

[{"Id":1,"Name":"Superman"}]