無法綁定到“ngForOf”，因為它不是“tbody”的已知屬性

Question

我正在嘗試使用*ngFor顯示電影列表。 但我面臨這個錯誤Can't bind to 'ngForOf' since it isn't a known property of 'tbody'. 我不知道為什么它會給出這個錯誤。 在谷歌上我發現這個問題不能綁定到'ngforOf'，因為它不是一個已知的本機屬性，但它的解決方案對我不起作用。 請幫我。

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>

Answer 1

與其在 tbody 中寫 *ngFor 不如在 tr 中寫它，它可能會起作用。

<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>