我正在尝试使用*ngFor
显示电影列表。但我面对这个错误Can't bind to 'ngForOf' since it isn't a known property of 'tbody'.
,我不知道为什么它给出这个错误。在谷歌上,我发现这个问题不能't绑定到'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>
与其在正文中写*ngFor,不如在正文中写*ngFor。
<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>