Hi I’m following along PluralSight video by Steve Michelotti: Building Mobile Apps with Ionic 2, Ang 2, and TS.
*everything works fine. All my ngFor calls find their data correctly (arrays).
Now I have a component that gets data via navParam. It is an object that I store in game:
export class GamePage {
game: any;
...
It looks like this:
{
id: 7961
location: "Meadowbrook Ct. 3"
locationId: "loc-3"
team1: "Baltimore Stars"
team1Id: 796
team1Score: "33"
team2: "MADE Elite"
team2Id: 798
team2Score: "39"
time: “2016-07-09T14:00:00”
}
Then I try to access the object in the template like this:
<button (click)="teamTapped(game.team1Id)">{{game.team1}}</button>
and I get this error
EXCEPTION: Error in ./GamePage class GamePage - inline template:11:45 caused by: Cannot read property ‘team1’ of undefined
It works for Steve. What could I be doing wrong?
this is a screenshot:
This is my work in progress:
This is Steve Michelotti’s final project files:
What if the call is not enought specific in JS, thing like these : ?
Hope it helps,
I tried it but it produces identical error. It stops at team1 of undefined. But I checked to see if the game var was populated and it is.
Then without knowing your code, I would assume the data is not available on the the screen / page you call it. Are you sure you have the data by api (console log showing the arrays and such on THIS page / screen) ?
yes I checked. I even created a dummy object called stuff.
stuff = { test1: "test one", test2: "test two"};
then I tried to call it in the template and got the same error but with the stuff var and property.
Then sorry, mm I think you did all in provisioning variables and data but we miss something …
(thinking)
What could create this error?
(idea) Sometimes obsverbables errors are not logged with (subsribe) event. You could maybe try with another approach like storing the data in ionic database to see if it all works (this.data.nameofthingy).
If your let or var is not empty in page (with console log) then it’s just a display page problem.
Your dummy object has a property named test1, yet your template tries to reference a property named team1. Not the same thing.
Yes rapropos. There are two var objects: game and stuff both produce the same error
This is driving me insane. I think this needs to be a github issue.
Try this exercise. Eliminate every single instance of “any” in your code. I bet you’ll discover your problem.
rapropos that worked!!!
changed:
game: any;
to
game = {};
Thank you