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

我在Angular 循环方面做了很多工作，但在这种情况下，我甚至无法在循环中正确呈现简单的UI元素. Select 元素确定在下面的循环中呈现的内容.在下面的示例中，循环似乎在没有用户输入的情况下一次又一次地计算函数:

  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' },
  ];

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

    <div *ngIf="selectedType">
      <div *ngFor="let param of getRequiredParams(selectedType)">
          <span>{{ param.label }}</span>
          <!-- Uncommenting this will freeze the UI upon select -->
          <!-- <input [(ngModel)]="achievementParams[param.key]" /> -->
      </div>
    </div>

这是我在循环中调用的函数.我打算为动态呈现的UI组件使用它的值:

  getRequiredParams(type: string): any[] {
    let result = [{key: 'missing',  label: 'mssing 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;
      // Add more cases for other types
      default:
        result = [{key: 'missing',  label: 'mssing label'}];
    }
    console.log(result);
    return result;
  }

一旦我 Select 了一个值并设置了seltedType，就会不断地调用getRequiredParams函数，我可以在控制台中看到这一点.因此，一旦我在输入元素中进行注释，用户界面就会冻结.我不明白问题出在哪里.到目前为止还没有抛出任何错误.

也许这并不重要，但组件是一个对话框组件. 另外，我用的是12号角.

如何才能以正确的方式做到这一点？