एंगुलर 2

Question

में वेब एपीआई से डेटा प्राप्त करना "Tour of Heroes" नामक कोणीय 2 पृष्ठ पर ट्यूटोरियल के लिए धन्यवाद, मैं एक साधारण कोणीय 2 एप्लिकेशन बनाने में कामयाब रहा। फिर एनीटीटी फ्रेमवर्क का उपयोग करके मैंने डेटाबेस बनाने का फैसला किया। और नायकों की सूची भरें (फ़ाइल से नहीं)। मैंने वेब एपी कंट्रोलर बनाया और सरल विधि प्राप्त की। फिर hero.service.ts में मैं नायकों की सूची प्राप्त करने के लिए इस विधि को कॉल करता हूं। जब मैं अपना ऐप लंच करता हूं तो यह नायकों की सूची दिखाता है लेकिन बिना किसी मूल्य के (नाम और आईडी खाली हैं)। जब मैं ब्राउज़र में अपना एप्लिकेशन डीबग करता हूं तो मैं this.heroes ऑब्जेक्ट heroes.component.ts में सही डेटा देख सकता हूं। तो क्या चल रहा है? name और 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 => <Hero[]>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 = <any>error); 
    } 

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

heroes.component.html:

<h2>My Heroes</h2> 
<ul class="heroes"> 
    <li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> 
     <span class="badge">{{hero.Id}}</span> {{hero.Name}} 
    </li> 
</ul> 
<div *ngIf="selectedHero"> 
    <h2> 
     {{selectedHero.Name | uppercase}} is my hero 
    </h2> 
    <button (click)="gotoDetail()">View Details</button> 
</div> 

hero.ts:

export class Hero { 
    Id: number; 
    Name: string; 
} 

वेब एपीआई नियंत्रक:

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<Hero> Get() 
     { 
      return _dbContext.Heroes; 
     } 
    } 
} 

हीरो निकाय:

namespace TestApplicationDataAccess.Entities 
{ 
    public class Hero 
    { 
     public int Id { get; set; } 
     public string Name { get; set; } 
    } 
} 

JSON वेब एपीआई नियंत्रक से लिया गया:

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

Answer 1

मेरे मामले में मुद्दा दृश्य स्टूडियो 2015 बग से संबंधित था। कोड के साथ कुछ भी गलत नहीं था। कभी-कभी बनाम में किए गए परिवर्तन ब्राउज़र में रीफ्रेश नहीं किए जाते थे। नवीनतम संस्करण में बनाम अद्यतन करने में मदद मिली।

Answer 2

getHeroes() { 
     this._heroservice.getHeroes() 
      .subscribe(res=>{ 
      this.heroes=res; 
      console.log(this.heroes); // make sure you get data here. 
     }, 
     (err)=>console.log(err), 
     ()=>console.log("Done") 
     ); 
} 

Answer 3

इस प्रयास करें: public heroes: Hero[] = [];