Skip to content

Instantly share code, notes, and snippets.

@zrod
Last active November 2, 2017 02:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zrod/2493e8b6d0b05ae69468f5c760884181 to your computer and use it in GitHub Desktop.
Save zrod/2493e8b6d0b05ae69468f5c760884181 to your computer and use it in GitHub Desktop.
ng-4 - Cannot read property 'title' of undefined
<div>
<h1>{{pousada.title}}</h1>
<small>{{pousada.location}}</small>
</div>
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
);
}
}
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));
}
}
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