Невозможно получить доступ к переменной, объявленной в классе из шаблона HTML Angular 2

Question

Во-первых, я знаю, что я должен использовать сервис для этого и планирую, но я не смог получить данные в службе, поэтому я построил его в своем компонент. Я не могу получить доступ к переменной «photos» из html-шаблона. Ниже приведена ошибка.

import { Component } from '@angular/core'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import {PhotosComponentComponent} from './photos-component/photos- component.component'; 
import {PhotosServiceService} from './photos-component/photos- service.service'; 
// import {photos} from './photos-component/photo'; 
import {Observable} from 'rxjs/Rx'; 
import {Http, Response} from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ang2demo-app', 
    templateUrl: 'ang2demo.component.html', 
    styleUrls: ['ang2demo.component.css'], 
    providers: [PhotosServiceService, HTTP_PROVIDERS]  
}) 

export class Ang2demoAppComponent { 

    title = 'ang2demo works!'; 

    constructor(private http: Http) {} 


    private photosUrl = 'https://jsonplaceholder.typicode.com/photos'; 

    getPhotos(){ 

    this.http.get(this.photosUrl) 
    .map((res:Response, data) => res.json()) 
    .subscribe(
     data => { 
     let photos = data; 
     console.log(photos); 
     return photos; //Now this variable 'photos' contains all of my data from the http.get request. But, I cannot access it from the template - Below 
     } 
    ) 
    } 



    ngOnInit() { 
    this.getPhotos() 
    } 
} 

Вот мой код шаблона, который служил в templateUrl

<div ngIf *ngFor="let photo of photos">{{photo.url}}</div> 

Я получаю сообщение об ошибке, что «не может прочитать URL-адрес свойство не определено.» Почему у меня нет доступа к переменной фотографий из шаблона html?

Answer 1

Как ваш код сейчас, вы не сохраняете фотографии на экземпляре контроллера и там, предоставляя его доступным шаблону.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let photo of photos">{{photo.url}}</div> 
    `, 
}) 
export class App { 
    photos: any[]; 
    private photosUrl = 'https://jsonplaceholder.typicode.com/photos'; 

    constructor(private http: Http) { } 

    ngOnInit() { 
    this.getPhotos() 
    } 

    getPhotos() { 
    this.http.get(this.photosUrl) 
     .map(data => data.json()) 
     .subscribe(data => { 
     this.photos = data; 
     }); 
    } 
} 

Вот минимальный plunker demonstrating the code.

Answer 2

После борьбы с этим. Я удалил эту логику из компонента и встроил ее в Сервис, где я возвращаю отображаемый Observable. Я импортировал это в свой компонент и сделал ссылку на него из функции ngOnInit после объявления его в моем конструкторе.

Затем я использовал * ngFor, чтобы повторить наблюдение и все еще имел проблемы, но при повторении наблюдаемого вы должны с помощью async «разрешить фотографию фотографий асинхронно». После этого все работает нормально.

Похоже, что при вызове метода .subscribe в массиве он возвращает свою собственную область, которая затем заменяет ссылку «this».