[ANGULAR] JSON을 Angular 2 객체로 파싱합니다
ANGULARJSON을 Angular 2 객체로 파싱합니다
해결법
-
1.Angular2의 세계에서는 다음과 같이 귀하의 요구 사항을 달성하기 위해 RXJ를 사용해야합니다.
Angular2의 세계에서는 다음과 같이 귀하의 요구 사항을 달성하기 위해 RXJ를 사용해야합니다.
구성 요소는 아래와 같이 서비스 값을 구독해야합니다.
this.userService.getUsers() .filter(users =>{ for(let user of users) { if(user.lastName == 'Vernon'){ this.users.push(user); }}}) .subscribe(users => this.users = users, error =>this.errorMessage =<any> error);
귀하의 서비스는 HTTP 호출을 높이고 아래와 같이 데이터를 반환해야합니다.
import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import {User} from './user.model.ts'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/filter'; @Injectable() export class UserService { private _url = "src/data.json"; constructor(private _http: Http) { } getUsers(): Observable<User[]> { return this._http.get(this._url) .map((response: Response) => <User[]>response.json()) .do(data => console.log("User data" + JSON.stringify(data))) .catch(this.handleError); } private handleError(error: Response) { console.log(error); return Observable.throw(error.json().error || 'Internal Server error'); } }
또한 데이터 모델을 보유하기 위해 클래스를 사용해서는 안됩니다. 대신 아래 데모와 같이 인터페이스를 사용하십시오.
라이브 데모
from https://stackoverflow.com/questions/42655795/parsing-json-into-a-angular-2-object by cc-by-sa and MIT license
'ANGULAR' 카테고리의 다른 글
[ANGULAR] rxjs - keyup 이벤트가있는 distinctIntilchanged () (0) | 2020.11.28 |
---|---|
[ANGULAR] 사용자 정의 구성 요소 (FormControl이 아닌)에 대한 유효성 검사기를 크레이트 할 수 있습니까? (0) | 2020.11.28 |
[ANGULAR] "declare var"가있는 테스트 구성 요소 (0) | 2020.11.28 |
[ANGULAR] Angular 2 RXJS 제한 시간 콜백 (0) | 2020.11.28 |
[ANGULAR] 관찰 할 수있는 것에 기다릴 때 Topromise () 대신에 내가 무엇을 사용해야합니까? (0) | 2020.11.28 |