I am trying to display movie list using *ngFor. but I am facing this error Can't bind to 'ngForOf' since it isn't a known property of 'tbody'. I don't know why its giving this error. On google I found this problem Can't bind to 'ngforOf' since it isn't a known native property but its solution isn't worked for me. please help me.

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShowmovieComponent } from './showmovie/showmovie.component';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  declarations: [
    ShowmovieComponent,
  ],
  imports: [
    CommonModule
  ]
})
export class AdminModule { }

showmovie.component.ts

@Component({
  selector: 'app-showmovie',
  templateUrl: './showmovie.component.html',
  styleUrls: ['./showmovie.component.css']
})
export class ShowmovieComponent implements OnInit {

  constructor(private formBuilder : FormBuilder, private _http:HttpClient, private router: Router , private movieserivce : MovieService) 
  { 
    this.ShowMovies();
  }

  ngOnInit(): void {
  }
  movielist: Movie[] = [];

  
  ShowMovies()
  {
      this.movieserivce.GetAllMovie().subscribe((result:any) =>
      {
          this.movielist = result
          console.log(this.movielist);
      })
  }


}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    HomeComponent
    //AllMoviesComponent
  ],
  imports: [
    BrowserModule,
    MovieModule,
   // CommonModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ["localhost:44357"],
        disallowedRoutes: []
      }
    })
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

showmovie.component.ts

<div >
    <div >
        <div >
            <div  >
                <table >
                    <thead>
                      <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody *ngFor="let movies of movielist">
                      <tr>
                        <td>{{movies.Title}}</td>
                        <td><a class ="btn btn-primary">edit</a></td>
                        <td><a class ="btn btn-danger">Delete</a></td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Instead of writing *ngFor in tbody write it in the tr, it might work.

<div >
    <div >
        <div >
            <div  >
                <table >
                    <thead>
                      <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let movies of movielist">
                        <td>{{movies.Title}}</td>
                        <td><a class ="btn btn-primary">edit</a></td>
                        <td><a class ="btn btn-danger">Delete</a></td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

First, the error is self-explanatory! you can't bind ngFor to tbody. it would generate a loop of <tbody> elements, and you can only have one in the table.

Instead, you bind it to tr. So, in your case, it would be

<tbody>
    <tr  *ngFor="let movies of movielist">
        <td>{{movies.Title}}</td>
        <td><a class ="btn btn-primary">edit</a></td>
        <td><a class ="btn btn-danger">Delete</a></td>
    </tr>
</tbody>

This will generate a loop of <tr> elements, as you intended.

Happy coding!