Angular 2-Modell in eine Funktion

Question

Ich ziehe Daten aus meiner Firebase-Datenbank.

Das ist mein service.ts

import { Injectable } from '@angular/core'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import {Http, Response, RequestOptions} from '@angular/http'; 
 
import { RealEstatePhotography } from './real-estate-photography'; 
 
import {AngularFire, FirebaseListObservable} from 'angularfire2'; 
 
import 'rxjs/add/operator/map'; 
 

 
@Injectable() 
 
export class RealEstatePhotographyService { 
 

 
    constructor(private af: AngularFire, private http: Http) { } 
 

 
private realEstate = this.af.database.list('realestate'); 
 

 
    getItems(){ 
 
    return (this.realEstate); 
 
    } 
 

 

 
    getItem(title: RealEstatePhotography) : Observable<any>{ 
 
    return this.realEstate 
 
    .map((list: Array<any>) => { 
 
     let result: RealEstatePhotography = new RealEstatePhotography(); 
 
     if (list){ 
 
     list.forEach(element => { 
 
      if (element.title === title){ 
 
      result = element 
 
      } 
 
     }); 
 
     return result; 
 
     } 
 
    }); 
 
    } 
 
}

das ist mein Detail Komponente:

import { Component, OnInit } from '@angular/core'; 
 
import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeHtml } from '@angular/platform-browser'; 
 
import { ActivatedRoute } from '@angular/router'; 
 
import { RealEstatePhotography } from '../real-estate-photography'; 
 
import { RealEstatePhotographyService } from '../real-estate-photography.service'; 
 

 
@Component({ 
 
    selector: 'app-real-estate-photography-detail', 
 
    templateUrl: './real-estate-photography-detail.component.html', 
 
    styleUrls: ['./real-estate-photography-detail.component.css'], 
 
    providers: [RealEstatePhotographyService], 
 
}) 
 
export class RealEstatePhotographyDetailComponent implements OnInit { 
 

 
photos = this.photo(); 
 
realEstate; 
 

 

 
    constructor(private route: ActivatedRoute, private _realEstatePhotographyService: RealEstatePhotographyService, private sanitizer: DomSanitizer) { } 
 

 
    photo(){ 
 
    var location = "" 
 
    for (var i = 0; i < location.length; i++){ 
 
     Array(i); 
 
    } 
 
    return console.log(Array(i)); 
 

 
    } 
 

 

 
    ngOnInit(){ 
 
    this.route.params.subscribe(params => { 
 
     let title = params['title']; 
 
     let realEstate = this._realEstatePhotographyService.getItem(title).subscribe(realEstate => { 
 
     this.realEstate = realEstate 
 

 
     }); 
 
    }); 
 
    } 
 
}

das ist mein html von t Hut-Komponente.

<p>{{realEstate.folder}}</p>

Dies ist die Daten, die ich erhalten:

Nun ist meine Frage. Ich muss dieses Ergebnis in die Variable "location" einfügen, die ich in der Funktion photo() habe.

etwas wie var location = this.realEstate.folder oder {{}} realEstate.folder

ich nicht herausfinden kann, wie es zu tun.

Danke

hier ist ein zupfen, aber natürlich nicht zurück in etwas, weil ich nicht

https://plnkr.co/edit/a0WKevpXpwvY8x7NG1cb?p=preview

Answer 1

zu Feuerbasis verbunden bin ich bin mir nicht ganz klar, was du bist versuchen zu tun, aber vielleicht könnte dich das näher bringen?

Beachten Sie, dass this.location "undefiniert" ist, bis Ihre beobachtbaren Daten zurückgegeben werden. Wenn Sie dies in der Vorlage verwenden, können Sie * ngIf = "location" auf dem Tag verwenden.

export class RealEstatePhotographyDetailComponent implements OnInit { 

    photos = this.photo(); 
    realEstate; 
    private location: any; 

     constructor(private route: ActivatedRoute, private _realEstatePhotographyService: RealEstatePhotographyService, private sanitizer: DomSanitizer) { } 

     photo(){ 

if(this.location) { 


     for (var i = 0; i < this.location.length; i++){ 
      Array(i); 
     } 
     return console.log(Array(i)); 
    } 
     } 


     ngOnInit(){ 
     this.route.params.subscribe(params => { 
      let title = params['title']; 
      let realEstate = this._realEstatePhotographyService.getItem(title).subscribe(realEstate => { 
      this.realEstate = realEstate 
    this.location=realEstate.folder; 
      }); 
     }); 
     } 
    }