Ionic/Angular: Can't bind to 'ngForOf', despite correct syntax-CodePudding

I am developing an Ionic App with Angular and ran into the following error:

my.page.ts (Snippet)

export class MyPage implements OnInit {
  public myArray: Array<string> = [];

  constructor(){}

  ngOnInit(){
    this.updateArray();
  }

  updateArray() {
    // Performs API Call and puts the results into 'myArray'
  }
}

my.page.html (Snippet)

<ion-select interface="popover">
  <ion-select-option *ngFor="let item of myArray">{{item}}</ion-select-option>
</ion-select>

What I expect is, that the strings contained in the array are mapped to selection options for the 'ion-select'. However, my browser console shows the error NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-select-option'

When researching that error, all I can find is the older usage of ngFor (item of myArray, etc.) that should no longer be used. However, I already use the up-to-date syntax as far as I understood.

I am running my app using npx ionic serve --lab, using Ionic with version 6 and Angular with version 13.

I also tried different components such as 'ion-text', but the same error occurs.

Also, I verified that the data from the API-Call is stored correctly in the array by printing it after the http-request has finished.

What am I doing wrong?

Thanks in advance!

UPDATE:

Here is my my.app.module-file:

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

import { IonicModule } from '@ionic/angular';

import { MyPageRoutingModule } from './my-routing.module';

import { MyPage } from './my.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MyPageRoutingModule
  ],
  declarations: [MyPage]
})
export class MyPageModule {}

CodePudding user response：

This error of type Can't bind to 'something' since it isn't a known property of 'element' may occur when you are using an attribute that not exist in the target element or like in this case, because you are trying to use an attribute directive that can't be found. In this case you are trying to use ngForOf directive but it can't be found, so you have to ensure that you are importing the host module for that directive in the host module of your component. To solve this case you have to import CommonModule in the module where you declare MyPage like this.

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

  @NgModule({
      declarations: [MyPage, ...],
      imports: [CommonModule, ...]
  })

EDIT

Is important to assign a value for <ion-select-option> because the default is undefined. I was able to reproduce your problem on a stackblitz and got the same error when not assign a value.

CodePudding user response：

You need to call ngIf to make sure the data isn't being loaded BEFORE your myArray data is ready.

Change your HTML code to below to check if there is any data exists in your array, if not, it will remain hidden and inactive until there is a data.

<ion-select *ngIf="myArray.length > 0" interface="popover">
     <ion-select-option *ngFor="let item of myArray">{{item}}</ion-select-option>
</ion-select>