ionic 2: *ngFor 不显示数据答案

【问题标题】：ionic 2: *ngFor not displaying dataionic 2: *ngFor 不显示数据
【发布时间】：2017-11-25 01:35:33
【问题描述】：

ngFor 在 HTML 中不工作。我在我的应用程序中只使用了一个模块。我尝试了很多解决方案，但没有解决这个问题。控制台没有任何错误。这是我的代码

电影.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';



@Component({
  selector: 'page-movie',
  templateUrl: 'movie.html',
})
export class Movie {
  http: any;
  movies_cats: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, http: Http) {
    this.http = http;
    return this.http.get('link.php?a=' + this.navParams.data.code + '&m=' + this.navParams.data.mac + '&s=' + this.navParams.data.serial + '&k=' + this.navParams.data.key + '&p=vodMovieList')
      .map(res => res.json())
      .subscribe(response => {
        this.movies_cats = response.vod_categories.vod_category;
        console.log(this.movies_cats);
      });
  }
}

电影.html

<ion-header>
  <ion-navbar>
    <ion-title>movie</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid class="grid_div">
    <ion-row class="grid_row">
      <ion-col col-3 class="grid_col">
        <ion-scroll scrollY class="scroll_bar">
          <div class="scroll-item" *ngFor="let cat of movies_cats">
            <p>name</p>
          </div>
        </ion-scroll>
      </ion-col>
      <ion-col col-9>SUB CATEGORIES</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {IonicStorageModule} from '@ionic/storage';

import { HttpModule} from '@angular/http';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Categories } from '../pages/categories/categories';
import { Live } from '../pages/live/live';
import { Movie } from '../pages/movie/movie';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Categories,Movie,Live
  ],
  imports: [
    BrowserModule,HttpModule,
    IonicModule.forRoot(MyApp),IonicStorageModule.forRoot(),
  IonicStorageModule.forRoot({
      name: '__mydb',
         driverOrder: ['indexeddb', 'sqlite', 'websql']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Categories,Movie,Live
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},Storage
  ]
})
export class AppModule {}

最后，我希望 div 重复 3 次，例如响应中的对象数量而不打印 cat。问题是 HTML 中没有出现任何内容

【问题讨论】：

在movie.ts中，尝试将movies_cats声明为public？
要添加到答案，您还可以使用{{cat.caption}}显示特定部分
@Guymage ，我试过了，但没用
我觉得你在 ngFor div 中需要<div> 标签。目前是打印名称 3 次吗？
@ Eric Semwenda 是的，这应该发生。

标签： ionic2 ngfor

【解决方案1】：

import { FormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';



imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CommonModule
  ],

【讨论】：

请解释你的答案。仅代码答案被认为质量低下，可能会导致删除。