Angular中如何在ngFor循环内正确动态渲染组件？

原因 #

Angular的变更检测机制会在每次检测周期执行模板中的所有表达式，包括你在*ngFor里直接调用的getRequiredParams(selectedType)。当启用input的双向绑定后，输入框的任何变化都会触发变更检测，进而再次调用该函数，形成无限循环，最终导致UI冻结。

正确实现方式 #

不要在模板中直接调用函数，而是将函数结果缓存到组件属性中，仅在selectedType变化时更新该属性：

1. 修改组件类 #

新增属性存储当前参数列表，并在选中类型变更时主动更新：

import { Component } from '@angular/core';

@Component({
  // 保留原有组件元数据
})
export class YourDialogComponent {
  achievementTypes = [
    { value: 'photos_containing_all_of', label: 'Photos Containing All Of' },
    { value: 'photos_containing_only_category', label: 'Photos Containing Only Category' },
    { value: 'photos_of_distinct_groceries', label: 'Global: Different Categories across all images' },
    { value: 'photos_contains_at_least', label: 'Photos Containing At least x groceries' },
  ];
  
  selectedType: string;
  currentRequiredParams: any[] = [];
  achievementParams: { [key: string]: any } = {};

  // 选中类型变更时更新参数列表
  onTypeChange() {
    this.currentRequiredParams = this.getRequiredParams(this.selectedType);
  }

  getRequiredParams(type: string): any[] {
    let result = [{key: 'missing', label: 'missing label'}];
    switch (type) {
      case 'photos_containing_all_of':
        result = [
          { key: 'setOfGroceries', label: 'Set of Groceries' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      case 'photos_containing_only_category':
        result = [
          { key: 'category', label: 'Category' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      case 'photos_of_distinct_groceries':
        result =  [
          { key: 'requiredDistinctGroceries', label: 'Required Distinct Groceries' }
        ];
        break;
      case 'photos_contains_at_least':
        result = [
          { key: 'groceryCount', label: 'Grocery Count' },
          { key: 'requiredPhotoCount', label: 'Required Photo Count' }
        ];
        break;
      default:
        result = [{key: 'missing', label: 'missing label'}];
    }
    return result;
  }
}

2. 修改模板 #

监听select的ngModelChange事件触发更新，循环遍历缓存的参数列表：

<select [(ngModel)]="selectedType" name="selectedType" [ngModelOptions]="{ standalone: true }" 
        class="custom-select" (ngModelChange)="onTypeChange()">
    <option *ngFor="let type of achievementTypes" [value]="type.value">{{ type.label }}</option>
</select>

<div *ngIf="selectedType">
  <div *ngFor="let param of currentRequiredParams">
      <span>{{ param.label }}</span>
      <input [(ngModel)]="achievementParams[param.key]" />
  </div>
</div>

额外优化建议 #

• 可在ngOnInit钩子中根据默认的selectedType初始化currentRequiredParams，避免初始状态为空。
• 若achievementTypes为静态数据，可定义为readonly常量，减少不必要的变更检测触发。

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