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