Last active
November 2, 2017 02:11
-
-
Save zrod/2493e8b6d0b05ae69468f5c760884181 to your computer and use it in GitHub Desktop.
ng-4 - Cannot read property 'title' of undefined
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h1>{{pousada.title}}</h1> | |
<small>{{pousada.location}}</small> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'rxjs/add/operator/switchMap'; | |
import { Component, OnInit } from '@angular/core'; | |
import { ActivatedRoute, ParamMap } from '@angular/router'; | |
import { DomSanitizer } from '@angular/platform-browser'; | |
import { SafeUrl } from '@angular/platform-browser'; | |
import { Pousada } from '../../services/pousada/pousada'; | |
import { PousadaService } from '../../services/pousada/pousada.service'; | |
@Component({ | |
selector: 'pousada', | |
templateUrl: './pousada-detail.component.html' | |
}) | |
export class PousadaDetailComponent implements OnInit { | |
pousada: Pousada; | |
embedParams: string; | |
sanitizer: DomSanitizer; | |
mapEmbedSrc: SafeUrl; | |
constructor( | |
private pousadaService: PousadaService, | |
private route: ActivatedRoute, | |
private domSanitizer: DomSanitizer | |
) { | |
this.embedParams = '365m/data=!3m1!1e3'; | |
this.sanitizer = domSanitizer; | |
this.pousada = pousadaService.getTemplate(); | |
} | |
ngOnInit(): void { | |
this.route.paramMap | |
.switchMap((params: ParamMap) => this.pousadaService.getRecord(params.get('slug'))) | |
.subscribe(pousada => this.pousada = pousada); | |
} | |
renderMap(): void { | |
this.mapEmbedSrc = this.sanitizer.bypassSecurityTrustResourceUrl( | |
'https://www.google.com/maps/embed/v1/place?center=' | |
+ this.pousada.lat | |
); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { Pousada } from './pousada'; | |
import { POUSADAS } from '../../mocks/mock-pousadas'; | |
@Injectable() | |
export class PousadaService { | |
getTemplate(): Pousada { | |
return new Pousada(); | |
} | |
getRecords(): Promise<Pousada[]> { | |
return Promise.resolve(POUSADAS); | |
} | |
getRecord(slug: string): Promise<Pousada> { | |
return this.getRecords() | |
.then(pousadas => pousadas.find(pousada => pousada.slug == slug)); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Pousada { | |
slug: string; | |
title: string; | |
location: string; | |
lat: string; | |
long: string; | |
images: { | |
main: string | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment