एक कोणीय सेवा

Question

से ऑब्जेक्ट सरणी प्राप्त करना मैं कोणीय (और उस मामले के लिए जावास्क्रिप्ट) के लिए नया हूं। मैंने एक कोणीय सेवा लिखी है जो उपयोगकर्ताओं की एक श्रृंखला देता है। डेटा को एक HTTP कॉल से पुनर्प्राप्त किया जाता है जो JSON प्रारूप में डेटा देता है। HTTP कॉल से लौटाए गए JSON डेटा को लॉग करते समय, मैं देख सकता हूं कि यह कॉल सफल है और सही डेटा लौटाया गया है। मेरे पास एक घटक है जो उपयोगकर्ताओं को एक HTML पृष्ठ प्राप्त करने के लिए सेवा कहता है जो उपयोगकर्ताओं को प्रदर्शित करता है। मैं सेवा से डेटा तक डेटा नहीं प्राप्त कर सकता। मुझे संदेह है कि मैं पर्यवेक्षक का गलत इस्तेमाल कर रहा हूं। हो सकता है कि मैं गलत तरीके से सदस्यता ले रहा हूं। अगर मैं ngInit फ़ंक्शन में getUsers कॉल पर टिप्पणी करता हूं और getUsersMock कॉल को अनमोल करता हूं, तो सब ठीक काम करता है और मैं HTML पृष्ठ में सूचीबॉक्स में प्रदर्शित डेटा देखता हूं। मैं JSON डेटा को किसी सरणी या सेवा में उपयोगकर्ताओं की सूची में कनवर्ट करना चाहता हूं, फिर सेवा से JSON लौटा रहा हूं और घटक को परिवर्तित कर रहा हूं।

डाटा उपयोगकर्ताओं पहुंचने के लिए HTTP कॉल से लौटे:

[ 
    { 
     "firstName": "Jane", 
     "lastName": "Doe" 
    }, 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    } 
] 

user.ts

export class User { 
    firstName: string; 
    lastName: string; 
} 

उपयोगकर्ता के service.ts

... 
@Injectable 
export class UserService { 
    private USERS: User[] = [ 
     { 
      firstName: 'Jane', 
      lastName: 'Doe' 
     }, 
     { 
      firstName: 'John', 
      lastName: 'Doe' 
     } 
    ]; 

    constructor (private http: Http) {} 

    getUsersMock(): User[] { 
     return this.USERS; 
    } 

    getUsers(): Observable<User[]> { 
     return Observable.create(observer => { 
      this.http.get('http://users.org').map(response => response.json(); 
     }) 
    } 
... 

user.component.ts

... 
export class UserComponent implements OnInit { 
    users: User[] = {}; 

    constructor(private userService: UserService) {} 

    ngOnInit(): void { 
     this.getUsers(); 
     //this.getUsersMock(); 
    } 

    getUsers(): void { 
     var userObservable = this.userService.getUsers(); 
     this.userObservable.subscribe(users => { this.users = users }); 
    } 

    getUsersMock(): void { 
     this.users = this.userService.getUsersMock(); 
    } 
} 
... 

user.component.html

... 
<select disabled="disabled" name="Users" size="20"> 
    <option *ngFor="let user of users"> 
     {{user.firstName}}, {{user.lastName}} 
    </option> 
</select> 
... 

!!! अद्यतन करें !!!

मैं "नायकों" ट्यूटोरियल पढ़ रहा था, लेकिन मेरे लिए काम नहीं कर रहा था इसलिए मैं चला गया और अन्य चीजों की कोशिश की। मैंने नायक ट्यूटोरियल का वर्णन करने के तरीके को अपना कोड दोबारा लागू कर दिया है। हालांकि, जब मैं इस .users के मान को लॉग करता हूं, तो यह अपरिभाषित रिपोर्ट करता है।

यहाँ मेरी संशोधित उपयोगकर्ता के service.ts

... 
@Injectable 
export class UserService { 
    private USERS: User[] = [ 
     { 
      firstName: 'Jane', 
      lastName: 'Doe' 
     }, 
     { 
      firstName: 'John', 
      lastName: 'Doe' 
     } 
    ]; 

    constructor (private http: Http) {} 

    getUsersMock(): User[] { 
     return this.USERS; 
    } 

    getUsers(): Promise<User[]> { 
     return this.http.get('http://users.org') 
      .toPromise() 
      .then(response => response.json().data as User[]) 
      .catch(this.handleError); 
    } 
... 

यहाँ है मेरे संशोधित user.component.ts

... 
export class UserComponent implements OnInit { 
    users: User[] = {}; 

    constructor(private userService: UserService) {} 

    ngOnInit(): void { 
     this.getUsers(); 
     //this.getUsersMock(); 
    } 

    getUsers(): void { 
     this.userService.getUsers() 
      .then(users => this.users = users); 

     console.log('this.users=' + this.users); // logs undefined 
    } 

    getUsersMock(): void { 
     this.users = this.userService.getUsersMock(); 
    } 
} 
... 

है !!!!!!!!!! अंतिम काम समाधान !!!!!!!!!! यह अंतिम काम कर समाधान के लिए सभी फ़ाइलों है:

user.ts

export class User { 
    public firstName: string; 
} 

user.service.ts

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable }  from 'rxjs/Observable'; 

import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { User } from './user'; 

@Injectable() 
export class UserService { 
    // Returns this JSON data: 
    // [{"firstName":"Jane"},{"firstName":"John"}] 
    private URL = 'http://users.org'; 

    constructor (private http: Http) {} 

    getUsers(): Observable<User[]> { 
     return this.http.get(this.URL) 
      .map((response:Response) => response.json()) 
       .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 
} 

user.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router }    from '@angular/router'; 

import { User }  from './user'; 
import { UserService } from './user.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'users-list', 
    template: ` 
     <select size="5"> 
      <option *ngFor="let user of users">{{user.firstName}}</option> 
     </select> 
    ` 
}) 

export class UserComponent implements OnInit{ 
    users: User[]; 
    title = 'List Users'; 

    constructor(private userService: UserService) {} 

    getUsers(): void { 
     this.userService.getUsers() 
      .subscribe(
       users => { 
        this.users = users; 
        console.log('this.users=' + this.users); 
        console.log('this.users.length=' + this.users.length); 
        console.log('this.users[0].firstName=' + this.users[0].firstName); 
       }, //Bind to view 
          err => { 
         // Log errors if any 
         console.log(err); 
        }) 
    } 

    ngOnInit(): void { 
     this.getUsers(); 
    } 
} 

Answer 1

अपना कोड देखें:

getUsers(): Observable<User[]> { 
     return Observable.create(observer => { 
      this.http.get('http://users.org').map(response => response.json(); 
     }) 
    } 

और https://angular.io/docs/ts/latest/tutorial/toh-pt6.html (बीटीडब्ल्यू) से कोड।वास्तव में अच्छा ट्यूटोरियल, आप इसे बाहर की जाँच करनी चाहिए)

getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data as Hero[]) 
       .catch(this.handleError); 
    } 

HttpService Angular2 अंदर पहले से ही एक नमूदार देता है, सौ जैसा आप यहां किया था चारों ओर एक और प्रत्यक्ष रैप करने के लिए की जरूरत नहीं है:

return Observable.create(observer => { 
     this.http.get('http://users.org').map(response => response.json() 

करने की कोशिश करो मैंने प्रदान किए गए लिंक में गाइड का पालन करें। जब आप इसे सावधानी से पढ़ते हैं तो आपको ठीक होना चाहिए।

--- संपादित ----

सबसे पहले जहां आप this.users चर लॉग इन करें? जावास्क्रिप्ट इस तरह से काम नहीं कर रहा है। आपका चर अपरिभाषित है और कोड निष्पादन आदेश के कारण यह ठीक है!

इस तरह यह करने के लिए प्रयास करें:

getUsers(): void { 
     this.userService.getUsers() 
      .then(users => { 
       this.users = users 
       console.log('this.users=' + this.users); 
      }); 


    } 

देखें जहां console.log (...) है!

से समझौता करने के लिए इस्तीफा देने का प्रयास करें() यह सिर्फ आरपीएलजे पृष्ठभूमि के साथ पीपीएल के लिए प्रतीत होता है।

एक और लिंक पकड़ें: https://scotch.io/tutorials/angular-2-http-requests-with-observables RxJs अवलोकनों के साथ एक बार फिर से अपनी सेवा बनाएं।