I am trying to learn Typescript
and Angular2
. What I do is consult a public service when I click and print the note, but I am getting the following error:
Cannot read property 'quotes' of undefined in [{{quote.contents.quotes.quote}} in App@4:20]
My Component.ts
import {Component, OnInit, Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, URLSearchParams} from 'angular2/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app',
template: `<ul>
<li (click)='myAlert()'> Helow World</li>
</ul>
<div>
<spam>{{quote.contents.quotes.quote}}</spam>
</div>`,
providers: [HTTP_PROVIDERS]
})
export class App {
public quote: Object;
public logError: string;
constructor(private http: Http){
this.quote = {};
}
myAlert(){
this.http.get("http://quotes.rest/qod.json").map(res => { return res.json()})
.subscribe(
data => this.quote = data,
err => this.logError(err),
() => console.log('Random Quote Complete')
);
}
}
my boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {App} from './component'
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(App, [HTTP_PROVIDERS]).catch(err => console.error(err));
Index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
How do I get the response from the service in the subscriber and place it in the template?
The error occurs because, before getting the data from the server,
quote
your component's property has an empty object and the value ofquote.contents
isundefined
I think you could solve it by saving the text of the quote directly in said property.
The method code
myAlert
would look like this:And in the template you would use it like this:
<spam>{{quote}}</spam>