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