Can't bind to 'ngForFor' since it isn't a known property of 'ion-item'

November 7, 2022

I’m trying to display data from an API here, but I get the error "" in the console output (see picture)

My problem is that I don’t know exactly why I get the error and what I can do about it, I’ve already tried it without * and also with a different notation. The CommonModuels and NgModuels modules are also imported into both the API service and thets.

<ion-list>
    <ion-list-header>
      Stundet List
    </ion-list-header>
    <ion-item lines="insert" *ngFor="let student for students">
      <ion-label>
        <p> {{ students.studentsOne }} </p>
      </ion-label>
    </ion-item>
  </ion-list>

import { Component } from '@angular/core';
import { ApiService } from '../api.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [CommonModule, NgModule]
})
export class HomePage {

  year: any;
  studentOne: any;
  studentTwo: any;
  student: any[] = [];

  constructor(public _apiService: ApiService) 
  {
    this.getStudents()
  }

  addStudent(){

    let data = {
      year: this.year,
      studentOne: this.studentOne,
      studentTwo: this.studentTwo,
    }

    this._apiService.addStudent(data).subscribe((res:any) => {
      console.log("SUCCESS ===",res);
      this.year = '';
      this.studentOne = '';
      this.studentTwo = '';
      alert('SUCCESS')
      this.getStudents()
    },(error: any) => {
      console.log("ERROR ===",error);
      alert('ERROR');
    })
  }

  getStudents(){
    this._apiService.getStudents().subscribe((res:any) => {
      console.log("SUCCESS ===",res);
      this.student = res;
    },(error: any) => {
      console.log("ERROR ===",error);
    })
  }

}