Ionic 3 и JSON: проблема с добавлением имени в сетке

Question

Во-первых: извините за мой английский, я не очень хорош с этим языком.

У меня небольшая проблема. Для моего экзамена мне нужно создать приложение для управления кинотеатрами. Я в самом начале этого, и у меня уже есть проблема.

Я хочу, чтобы на главной странице отображался список названий кинотеатров, которые я должен зарегистрировать в файле с именем home.ts.

Но после тестирования страницы и перезапуска программы, прежде чем снова составить завещание, отображаются мои заголовки, но не список названий кинотеатров.

Я не знаю, почему это не работает.

Я поместил здесь мой текущий код, чтобы вы могли лучше понять мой контекст и в чем может быть проблема.

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) {

  }
}

Спасибо за ваши ответы и хорошего дня.

Answer 1

Вам нужно исправить назначение для "кинотеатров" в вашем коде:

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) {

  }
}

Также, чтобы сделать его еще лучше, вы можете объявить свои переменные с типом перед конструктором, а затем делать присваивания в конструкторе. Это более стандартный подход:

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"
            }
        ]
    }
}