मैंने हीरोज ट्यूटोरियल का अनुसरण किया है और अब मैं एक एमवीसी वेब एपीआई रेस्ट सर्विस से अपने हीरो डेटा को पुनः प्राप्त करने का प्रयास कर रहा हूं। मैंने अपने Hero.service में GetHeroes() पद्धति को संशोधित किया है:

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { HttpClient } from '@angular/common/http';

export class Hero {
  constructor(public Id: number, public HeroName: string, public Location: string) { }
}

@Injectable()
export class HeroService {

  constructor(private http: HttpClient) { }

  results: Observable<string[]>;

  private location: string;

  getHeroes(): Observable<Hero[]> {
      return this.http.get('http://localhost:50125/api/heroes')
          .map((response: Response): Hero[] => JSON.parse(response['_body']))
          .catch(error => Observable.throw(error));
  }

  getHero(id: number | string) {
    return this.getHeroes()
      // (+) before `id` turns the string into a number
      .map(heroes => heroes.find(hero => hero.Id === +id));

  }

}

मैं अपने घटक से सेवा विधि बुला रहा हूँ:

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

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

@Component({
  template: `
    <h2>HEROES</h2>
    <ul class="items">
      <li *ngFor="let hero of heroes$ | async"
        [class.selected]="hero.Id === selectedId">
        <a [routerLink]="['/hero', hero.Id]">
          <span class="badge">{{ hero.Id }}</span>{{ hero.HeroName }}
        </a>
      </li>
    </ul>
  `
})
export class HeroListComponent implements OnInit {
  heroes$: Observable<Hero[]>;

  private selectedId: number;

  constructor(
    private service: HeroService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes();
      });
  }

}

माई हीरोज एपीआई नियंत्रक इस तरह दिखता है:

using HeroesService.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;

namespace HeroesService.Controllers
{
    public class HeroesController : ApiController
    {
        // GET: api/Heroes
        public List<Hero> Get()
        {
            List<Hero> heroes = new List<Hero>();

            Hero superman = new Hero();
            superman.Id = 10;
            superman.HeroName = "Superman";
            superman.Location = "Los Angeles, California";
            heroes.Add(superman);

            Hero batman = new Hero();
            batman.Id = 11;
            batman.HeroName = "Batman";
            batman.Location = "Chicago, Illinois";
            heroes.Add(batman);

            return heroes;
        }
    }
}

मैं क्रोम के नेटवर्क टैब में डेटा देख सकता हूं जो इस तरह दिखता है:

[{"Id":10,"HeroName":"Superman","Location":"Los Angeles, California"},{"Id":11,"HeroName":"Batman","Location":"Chicago, Illinois"}]

दुर्भाग्य से, मुझे एक त्रुटि मिलती है जो इस तरह दिखती है (शायद इसका मतलब है कि प्रतिक्रिया डेटा अपरिभाषित है):

त्रुटि सिंटैक्स त्रुटि: JSON में स्थिति 0 पर JSON.parse () MapSubscriber.eval [प्रोजेक्ट के रूप में] (hero.service.ts:34) पर MapSubscriber._next (map.ts:75) पर MapSubscriber.Subscriber पर अनपेक्षित टोकन। अगला (Subscriber.ts:95) MapSubcriber._next (map.ts:80) पर MapSubscriber पर। Subscriber.ts:95) MergeMapSubscriber.notifyNext (mergeMap.ts:151) पर InnerSubscriber._next (InnerSubscriber.ts:17) पर

0
TrevorBrooks 29 सितंबर 2017, 22:28

2 जवाब

सबसे बढ़िया उत्तर

आप इस तथ्य का लाभ उठा सकते हैं कि HttpClient.get आपके लिए JSON डेटा के साथ काम करने में सक्षम है। HttpClient को यह बताने के लिए निम्न कोड का उपयोग करें कि प्रतिक्रिया प्रकार Hero[] है और अपनी कॉल को map और catch दोनों पर छोड़ दें:

 return this.http.get<Hero[]>('http://localhost:50125/api/heroes');

मुझे उम्मीद है कि आपको undefined इस तथ्य के कारण मिल रहा है कि response के पास _body संपत्ति नहीं होगी।

2
Kirk Larkin 29 सितंबर 2017, 22:41

आप नए HttpClient का उपयोग कर रहे हैं लेकिन इसका उपयोग आप पुराने http के साथ करेंगे।

getHeroes(): Observable<Hero[]> {
  return this.http.get('http://localhost:50125/api/heroes')
    .map((response: Response): Hero[] => JSON.parse(response['_body']))
    .catch(error => Observable.throw(error));
}

होना चाहिए

getHeroes(): Observable<Hero[]> {
  return this.http.get<Hero[]>('http://localhost:50125/api/heroes');
}

आप बस इसकी सदस्यता ले सकते हैं और आपको JSON.parse करने की आवश्यकता नहीं है।

2
Jun Kang 29 सितंबर 2017, 22:37