Angular中*ngFor无法渲染值的问题排查与修复求助

核心问题分析 #

1. 表单混合使用导致冲突
   同时使用Reactive Forms的formControlName和模板驱动表单的[(ngModel)]，触发了Angular表单内部冲突，中断了组件渲染流程，导致*ngFor指令无法正常执行。

2. 未初始化变量引发报错
   TypeScript中仅声明了order: Order;但未实例化，HTML里的[(ngModel)]="order.name"会抛出Cannot read properties of undefined错误，直接导致组件渲染失败。

3. 表单控件初始化错误
   FormControl初始化时用了多余的数组包裹（new FormControl(['', Validators.required])），导致控件状态异常，间接影响组件渲染。

修复后的代码实现 #

TypeScript部分

export class PlaceOrderComponent implements OnInit {
  orders: Order[]; 
  tables: number[] = [1, 5, 7];
  // 初始化Order实例，避免undefined报错
  order: Order = new Order(); 
  items: Item[] = [
    new Item("Drink", 5, "A vintage wine of your choice"), 
    new Item("Steak", 20, "Filet Mignon garnished with parsley"), 
    new Item("Salad", 5, "Prepared according to your specification"), 
    new Item("Roll", 3, "Served with butter"), 
    new Item("Soup", 3, "Daily special")
  ];
  itemchecked: boolean = false;
  form = new FormGroup({
    // 移除多余的数组包裹，正确初始化FormControl
    tableSelected: new FormControl('', Validators.required),
    name: new FormControl('', Validators.required)
  });

  constructor(
    private os: OrderService,
    public dialogRef: MatDialogRef<PlaceOrderComponent>
  ) {}

  ngOnInit(): void {
    // 如需同步表单值到order变量，可通过订阅表单变化实现
    this.form.get('name')?.valueChanges.subscribe(value => {
      this.order.name = value;
    });
  }

  onChange(item: Item, checked: boolean): void {
    // 实现商品选中逻辑，更新itemchecked状态
    this.itemchecked = checked || this.itemchecked;
  }
}

HTML部分

<form [formGroup]="form">
  <div class="form-group">
    <label for="name">Name:</label>
    <!-- 移除ngModel，仅使用Reactive Forms的formControlName -->
    <input type="text" formControlName="name" class="form-control">
  </div>   

  <div class="form-group" *ngFor="let item of items">
    <input  
      type="checkbox" 
      (change)="onChange(item, $event.target.checked)" 
      class="form-control"
    />
    <label class="tooltip">{{item.name}}
      <span class="tooltiptext">{{item.desc}}</span>
    </label>
    <label>{{item.price}}</label>
  </div>

  <div class="form-group">
    <label for="ddown">Select Table:</label>
    <select name="ddown" formControlName="tableSelected" class="form-control">
      <option disabled>Select Table</option>
      <!-- 用[value]绑定变量，而非固定字符串 -->
      <option *ngFor="let table of tables" [value]="table">Table{{table}}</option>
    </select>
  </div>

  <mat-dialog-actions>
    <button type="submit" [disabled]="!itemchecked && !form.valid">Order Now</button>
  </mat-dialog-actions>
</form>

额外注意事项 #

• 确保Order类有正确的属性定义，比如：

  export class Order {
    name?: string;
    // 其他订单相关属性
  }
  

• 检查HTML结构，移除原代码中多余的闭合</div>（原代码末尾有一个无匹配的</div>）
• 确认Item类的构造函数能正确接收参数并赋值属性

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