*ngFor not executing when using variable from the module in ionic/angular project

Question

I am creating an Ionic/Angular application and I want to display values from a list inside a statement using *ngFor. But for some reason *ngFor does nothing.

*ngFor does not run when I say *ngFor="let i of eventList" but does run when I place the values the variable has inside

*ngFor="let i of {'id': 1, 'name':'Superman'},{'id' :2,'name':'Batman'},
  {'id' : 5, 'name':'BatGirl'},
  {'id' : 3, 'name':'Robin'},
  {'id' : 4, 'name':'Flash'}
];"

then it runs.

Here is my tab1.module.ts and html

import { RouterModule } from '@angular/router';
import { NgModule, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { AuthService} from '../auth.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule
{ 
  public eventList: {'id': number, 'name': string}[]  =[{'id': 1, 'name':'Superman'},
  {'id' : 2, 'name':'Batman'},
  {'id' : 5, 'name':'BatGirl'},
  {'id' : 3, 'name':'Robin'},
  {'id' : 4, 'name':'Flash'}
];
  public message: any = '';
  constructor(public auth: AuthService)
  { 
  } 
}

The html

<ion-item >
  <ion-input type="number" clearInput></ion-input>
    <ion-select placeholder="Select One" >
      <ion-select-option *ngFor="let i of eventList" value="{{i.id}}">
          {{i.name}}
       </ion-select-option>
    </ion-select>
</ion-item>

When I run this the select box stays empty. I have tried many different ways and formatting for the variable as well and it just does nothing.

Kunal Panchal · Accepted Answer · 2019-08-14 11:58:55Z

2

Place the code in your component and not in the modules. Angular modules is majorly for imports, exports, declarations etc.

answered Aug 14, 2019 at 11:58

Kunal Panchal

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Elias Soares · Accepted Answer · 2019-08-14 10:14:49Z

0

You should place your logic inside your Tab1PageComponent not on module itself.

The module is for declaring dependencies, exporting components, etc. It almost always remains empty.

answered Aug 14, 2019 at 10:14

Elias Soares

10.4k4 gold badges36 silver badges62 bronze badges

1 Comment

Lekker Dieter Over a year ago

A silly mistake. I did not see there is a tab1.page.ts file. Thank you good sir @Elias Soares

Collectives™ on Stack Overflow

*ngFor not executing when using variable from the module in ionic/angular project

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related