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

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.

      Stundet List
    <ion-item lines="insert" *ngFor="let student for students">
        <p> {{ students.studentsOne }} </p>
import { Component } from '@angular/core';
import { ApiService } from '../api.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
  imports: [CommonModule, NgModule]
export class HomePage {

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

  constructor(public _apiService: ApiService) 


    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 = '';
    },(error: any) => {
      console.log("ERROR ===",error);

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


enter image description here

>Solution :

Fix <ion-item lines="insert" *ngFor="let student for students"> to <ion-item lines="insert" *ngFor="let student of students"> (of instead of for)

Leave a Reply