각도 서비스에서 객체 배열 얻기

Question

저는 Angular (그리고 그 점에 관해서는 자바 스크립트)를 처음 사용했습니다. 나는 일련의 사용자를 반환하는 Angular 서비스를 작성했습니다. 데이터는 JSON 형식의 데이터를 반환하는 HTTP 호출에서 검색됩니다. HTTP 호출에서 반환 된 JSON 데이터를 로깅 할 때이 호출이 성공했으며 올바른 데이터가 반환 된 것을 확인할 수 있습니다. 서비스를 호출하여 사용자를 얻는 구성 요소와 사용자를 표시하는 HTML 페이지가 있습니다. 서비스에서 구성 요소로 데이터를 가져올 수 없습니다. Observable을 잘못 사용하고있는 것 같습니다. 어쩌면 나는 부정확하게 또한 구독을 사용하고있다. getUsers를 ngInit 함수에서 호출하고 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> 
... 

! 업데이트 !!!

"영웅"튜토리얼을 읽었지 만 나에게 도움이되지 않아서 다른 것을 시도해 보았습니다. 영웅 튜토리얼에서 설명한대로 코드를 다시 구현했습니다. 그러나 this.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 (BTW.정말 좋은 튜토리얼, 당신은 당신이 여기처럼 소우 주위에 또 다른 관찰 가능한 포장 할 필요가 없습니다,

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

이 Angular2 내부의 HttpService를 이미 관찰을 반환) 밖으로 그것을 확인해야합니다

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

에 시도 제가 제공 한 링크의 가이드를 따르십시오. 신중하게 공부할 때 괜찮을 것입니다.

--- 수정 ---- 당신이 변수 this.users 로그 모든

먼저? JavaScript는 그런 식으로 작동하지 않습니다. 변수는 정의되지 않았으므로 코드 실행 순서 때문에 괜찮습니다!

같이 그것을보십시오 :

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


    } 

은을 console.log (...) 인 경우를 참조하십시오!

toPromise()에서 사퇴하여 RxJ 배경이없는 ppl 인 것처럼 보입니다.

다른 링크 잡기 : https://scotch.io/tutorials/angular-2-http-requests-with-observables RxJs 관찰 기록으로 서비스를 다시 한 번 빌드하십시오.