Angular：使用ngFor遍历Model对象属性生成表单无显示问题排查

核心问题1：Model实例属性无法被枚举 #

你定义的Model类中，属性仅用!做非空声明，但实例化时未赋值，导致Object.keys()无法获取这些属性——JavaScript中，未赋值的类属性不会成为实例的可枚举属性，因此getModelProperties()返回空数组，*ngFor没有可遍历的内容。

核心问题2：缺少FormsModule导入 #

模板中使用了[(ngModel)]双向绑定，必须在模块中导入FormsModule，否则Angular会报错，导致表单无法正常渲染。

解决方案步骤： #

1. 修复属性获取逻辑（二选一即可）

• 方案一：获取所有类定义的属性
  修改principal.component.ts中的方法，用Object.getOwnPropertyNames替代Object.keys，它能返回类中定义的所有自身属性，无论是否赋值：

  getModelProperties(): string[] {
    return Object.getOwnPropertyNames(this.model);
  }
  

• 方案二：初始化Model属性
  修改model.ts，给属性设置默认值，让Object.keys()能正常识别：

  export class Model {
    text: string = '';
    number: number = 0;
  }
  

2. 导入FormsModule

在app.module.ts中添加FormsModule的导入：

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

import { AppComponent } from './app.component';
import { PrincipalComponent } from './principal.component';

@NgModule({
  declarations: [
    AppComponent,
    PrincipalComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到此处
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 可选优化：缓存属性列表+匹配输入框类型

为避免每次变更检测都调用方法，可缓存属性列表，同时根据属性类型设置输入框类型：
修改principal.component.ts：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-principal',
  templateUrl: './principal.component.html',
  styleUrls: ['./principal.component.css']
})
export class PrincipalComponent implements OnInit {
  @Input() model: any;
  modelProperties: string[] = [];

  ngOnInit(): void {
    this.modelProperties = Object.getOwnPropertyNames(this.model);
  }
}

修改模板：

<li *ngFor="let property of modelProperties">
  <label for="{{ property }}">{{ property }}:</label>
  <input 
    type="{{ property === 'number' ? 'number' : 'text' }}" 
    [id]="property" 
    [name]="property" 
    placeholder="Write Something" 
    [(ngModel)]="model[property]"
  >
</li>

内容的提问来源于stack exchange，提问作者JamesB