각도 2 - HTTP로부터의 반환 값을 할당 구성 요소

Question

나는 각 2

recent.service.ts에 사용하여 JSON 파일 http.get을 얻고 내부 전역 변수() 메소드를 구독 할 수 없습니다 :

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



@Injectable() 
export class RecentService { 

    private _url = 'http://localhost:3001/api/uploadedFiles'; 

    constructor(private _http: Http) { 


    } 

    getJson() { 

     return this._http.get(this._url) 
      .map(res => res.json()); 

    } 

} 

recent.component.ts :

import {Component, OnInit} from '@angular/core'; 
    import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from    '@angular/common'; 
    import {RecentService} from './recent.service'; 
    import {HTTP_PROVIDERS} from '@angular/http'; 
    import {Observable} from 'rxjs/Observable'; 


    @Component({ 
    selector: 'recent', 
    pipes: [], 
    providers: [RecentService, HTTP_PROVIDERS], 
    styleUrls: ['/app/pages/content/components/recent.styles.css'], //might need to change reference 
    template: require('./recent.html') // `<strong>My edit page</strong>` 
    }) 
    export class Recent implements OnInit{ 

     allFiles; 
     public allFiles_error:Boolean = false; 
     openModalWindow:boolean=false; 
     images = []; 
     currentImageIndex:number; 
     opened:boolean=false; 
     imgSrc:string; 

    constructor(private _recentService: RecentService) { 
     this._recentService.getJson() 
      .subscribe(data => { 
      this.allFiles = data; 
      console.log("allFiles: ", this.allFiles); 
      console.log(this.allFiles.length); 
      for(var i = 0; i < this.allFiles.length; i++) { 
       this.images.push({ 
       thumb: this.allFiles[i].url, 
       img: this.allFiles[i].url, 
       description: "Image " + (i+1) 
       }); 
      } 
      console.log("Images: ", this.images); 
      }, 
      err => { this.allFiles_error = true }, 
      () => console.log('Completed!') 
    ); 

    } 

    ngOnInit() { 

    console.log(this.images.length); 
    console.log(this.images); 
    console.log(typeof this.images); 
    } 
    //this is the function where I want to access this.images 
    openGallery(index) { 
     if(!index) { 
     this.currentImageIndex = 1; 
     } 
     this.currentImageIndex = index; 
     this.opened = true; 
     for (var i = 0; i < this.images.length; i++) { 
     if (i === this.currentImageIndex) { 
     this.imgSrc = this.images[i].img; 
     break; 
     } 
    } 
    console.log(this.imgSrc); 
    } 

this.allFiles는 JSON 오브젝트의 배열이다. this.allFiles에서 선택한 데이터를 this.images에 저장하려고합니다. 또한이 구성 요소 전체에서 this.images를 전역 변수로 액세스하려고하지만 http.get()을 사용하여 비동기 호출을 수행 할 수 없었습니다. 내 HTML 내에서 비동기 파이프를 시도했지만 또한 오류가 발생했습니다. 전역으로 this.images에 액세스 할 수있는 방법이 있습니까?

미리 감사드립니다.

Answer 1

저는 TypeScript와 Angular2에 대한 경험이 거의 없지만 문제는 화살표 기능과 this 키워드라고 생각합니다. 오류 함수에서 대괄호를 사용할 때마다 내부의 this은 원하는 상위 클래스가 아닌 함수 자체를 참조하기 시작합니다. 오류 처리에도 동일하게 수행하십시오.

또한 생성자에서 호출을 제거하고 ngOnInit을 사용하십시오.

이런 식으로 뭔가를 시도하고 알려 주시기 바랍니다 : 당신이 this.allFiles에 액세스하려면 어떻게

export class Recent implements OnInit{ 
    allFiles; 
    public allFiles_error:Boolean = false; 
    openModalWindow:boolean=false; 
    images = []; 
    currentImageIndex:number; 
    opened:boolean=false; 
    imgSrc:string; 

    constructor(private _recentService: RecentService) { } 

    ngOnInit() { 
     this._recentService.getJson().subscribe(
      data => initData(data), 
      err => handleError(), 
      () => console.log('Completed!')); 
    } 

    initData(data){ 
     this.allFiles = data; 
     console.log("allFiles: ", this.allFiles); 
     console.log(this.allFiles.length); 
     for(var i = 0; i < this.allFiles.length; i++) { 
      this.images.push({ 
      thumb: this.allFiles[i].url, 
      img: this.allFiles[i].url, 
      description: "Image " + (i+1) 
      }); 
     } 
     console.log("Images: ", this.images); 
     console.log(this.images.length); 
     console.log(this.images); 
     console.log(typeof this.images); 
    } 

    handleError() { 
     this.allFiles_error = true; 
    } 
} 

Answer 2

를?

은 Observables에서 구독했기 때문에 파이프없이 추가 할 수 있습니다. Angular2는 템플릿을 다시 렌더링한다는 것을 알고 업데이트됩니다.

구성 요소에서 다른 기능에 액세스해야하는 경우 . 서브 스크립 션 함수 내에 함수 호출을 추가하십시오.