ngFor Not working in the HTML.I am using only one module in my application. I tried many solution but didn’t solve this problem. There isn’t any error in 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 {}
The problem is that nothing appears in the HTML although the JSON reply contains 3 objects.