-1

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 class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card" >
                <table class="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>
Felix
  • 9,248
  • 10
  • 57
  • 89
Nitin Saini
  • 507
  • 2
  • 10
  • 26

1 Answers1

1

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

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card" >
                <table class="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>
Kittu Ekanth
  • 11
  • 1
  • this isn't right answer. Now I am getting this error `NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'tr'.` – Nitin Saini May 26 '22 at 04:56