First : sorry for my English I'm not so good with this language.
I have a small problem. For my examination I have to create an application for management of cinemas. I am at the very beginning of this and I already have a problem.
I want the home page to show the list of the names of the cinemas which I have to register in the file called home.ts.
But after testing the page and restarting the program before making out a will again: my headers display but not the list of the name of cinemas.
I do not know why that does not work.
I put in here my current code so that you can understand my context better and what can be the problem.
home.html :
<ion-header>
<ion-navbar>
<ion-title>
Bienvenu sur myCiné
</ion-title>
</ion-navbar>
</ion-header>
<ion-navbar color="primary">
<button menuToggle ion-button icon-only>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>myCiné</ion-title>
</ion-navbar>
<ion-toolbar color="secondary">
<ion-title>Mes cinémas favoris</ion-title>
</ion-toolbar>
<ion-content padding>
<ion-grid *ngIf="cinemas">
<ion-row>
<ion-col col-1 *ngFor="let cinema of cinemas">
{{cinema.name}}
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.ts :
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
cinemas: [
{
id: 1,
name: "Méga CGR La mézière",
adress: "Zone de Millet",
cp: "35320",
ville: "La Mézière",
nbSalles:"12",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle ICE"
},
{
id: 2,
name: "Pathé Atlantis",
adress: "8 allée de la pérouse",
cp: "44800",
ville: "Saint Herblain",
nbSalles:"12",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle IMAX"
},
{
id: 3,
name: "Gaumont Nantes",
adress: "12 place du commerce",
cp: "44000",
ville: "Nantes",
nbSalles:"14",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle IMAX"
},
{
id: 4,
name: "Méga CGR La Rochelle",
adress: "Avenue Heri Becqurel",
cp: "17000",
ville: "La Rochelle",
nbSalles:"13",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle ICE"
}
]
constructor(public navCtrl: NavController) {
}
}
Thank for your answers and have a nice day.
You need to fix assignment for "cinemas" in your code:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// here use assignment rather than comma:
cinemas = [
{
id: 1,
name: "Méga CGR La mézière",
adress: "Zone de Millet",
cp: "35320",
ville: "La Mézière",
nbSalles:"12",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle ICE"
},
{
id: 2,
name: "Pathé Atlantis",
adress: "8 allée de la pérouse",
cp: "44800",
ville: "Saint Herblain",
nbSalles:"12",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle IMAX"
},
{
id: 3,
name: "Gaumont Nantes",
adress: "12 place du commerce",
cp: "44000",
ville: "Nantes",
nbSalles:"14",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle IMAX"
},
{
id: 4,
name: "Méga CGR La Rochelle",
adress: "Avenue Heri Becqurel",
cp: "17000",
ville: "La Rochelle",
nbSalles:"13",
accesH:"oui",
proj3D: "oui",
stand: "oui",
lesPlus:"Salle ICE"
}
]
constructor(public navCtrl: NavController) {
}
}
Also to make it even better you can declare you variables with type before constructor and then do assignments in constructor. This is a more standard approach:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
interface Cinema {
id: number,
name: string,
adress: string,
cp: string,
ville: string,
nbSalles: string,
accesH: string,
proj3D: string,
stand: string,
lesPlus: string
}
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// here we can declare var and its type:
cinemas: Array<Cinema>;
constructor(public navCtrl: NavController) {
// here we can do assignments:
this.cinemas = [
{
id: 1,
name: "Méga CGR La mézière",
adress: "Zone de Millet",
cp: "35320",
ville: "La Mézière",
nbSalles: "12",
accesH: "oui",
proj3D: "oui",
stand: "oui",
lesPlus: "Salle ICE"
},
{
id: 2,
name: "Pathé Atlantis",
adress: "8 allée de la pérouse",
cp: "44800",
ville: "Saint Herblain",
nbSalles: "12",
accesH: "oui",
proj3D: "oui",
stand: "oui",
lesPlus: "Salle IMAX"
},
{
id: 3,
name: "Gaumont Nantes",
adress: "12 place du commerce",
cp: "44000",
ville: "Nantes",
nbSalles: "14",
accesH: "oui",
proj3D: "oui",
stand: "oui",
lesPlus: "Salle IMAX"
},
{
id: 4,
name: "Méga CGR La Rochelle",
adress: "Avenue Heri Becqurel",
cp: "17000",
ville: "La Rochelle",
nbSalles: "13",
accesH: "oui",
proj3D: "oui",
stand: "oui",
lesPlus: "Salle ICE"
}
]
}
}