Angular12项目中ngFor指令无报错但无法渲染内容如何解决

算力阿峰

2026-9-24

Angular 12 *ngFor 表格不渲染问题修复方案

问题根因

1. 组件未注册到NgModule

你定义的MoviesComponent没有添加到AppModule的declarations声明数组中，Angular无法识别该组件模板中的内置指令（包括*ngFor），因此不会渲染循环内容，同时不会抛出语法报错。

2. 可选验证点：缺少路由出口

请确认app.component.html中存在<router-outlet></router-outlet>标签，否则路由匹配到/movies时也不会加载MoviesComponent组件内容。

3. 模板属性拼写错误（非*ngFor不渲染的直接原因，但会导致日期列空值）

模板中{{ movie.relaseDate }}拼写错误，正确属性名是releaseDate，少写了一个字母e。

修复步骤

1. 修正AppModule配置

修改app.module.ts的declarations字段，添加MoviesComponent：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 导入组件
import { MoviesComponent } from './pages/movie/movies.component';

@NgModule({
    declarations: [
        AppComponent,
        MoviesComponent // 新增组件声明
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }