Ionic 2: * ng to display data

ngFor Doesn't work in HTML. I only use one module in my application. I tried many solutions but didn't solve this problem. There are no errors in the console. Here is my code

movie.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);
      });
  }
}

      

movie.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 {}

      

JSON response

In the end, I expect the div to repeat 3 times, for example the number of objects in the response without printing cat. The problem is that nothing is showing in HTML

+3


source to share





All Articles