无法在运行时动态设置集合

我有一段JSON，代表用户可以设置的一些操作和参数。

我想在下拉菜单中显示操作，并且当用户选择一个操作时-将显示与操作相关的必需参数。

例：

• 用户用一个参数选择一个动作，显示一个输入框
• 用户用两个参数选择一个动作，显示两个输入框。

我几乎可以使用它，但是*ngFor没有显示所选操作的输入：

在onChange-如果我打印this.steps，我可以看到它this.steps[i].SelectedAction.UIParameters有一个值，所以我不确定为什么不进行渲染。

JSON：

[
  {
    "ActionEnum": "CLICKELEMENT",
    "Name": "Click Element",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element to click"
      }
    ]
  },
  {
    "ActionEnum": "INPUTTEXT",
    "Name": "Input Text",
    "Description": "Enters text into the element identified by it's id",
    "UIParameters": [
      {
        "ParameterEnum": "ELEMENTID",
        "Description": "The id of the element"
      },
      {
        "ParameterEnum": "TEXTVALUE",
        "Description": "The text to enter into the element"
      }
    ]
  }
]

打字稿：

import { Component, Output, EventEmitter, OnInit } from "@angular/core";
import { ActionService } from "../services/action-service";
import { Action } from "../models/Action";

@Component({
  selector: 'app-scenario-step-editor-component',
  template: `
  <form #formRef="ngForm">
    <div *ngFor="let step of steps; let in=index" class="col-sm-3">
      <div class="form-group">
        <label class="sbw_light">Action:</label><br />
        <select (change)='onChange()' [(ngModel)]="step.Action" name="action_name_{{in}}">
            <option *ngFor="let action of this.availableActions" [(ngModel)]="steps[in].value" name="action_name_{{in}}" class="form-control" required>
              {{action.Name}}
            </option>
        </select>
        <div *ngIf="steps[in].SelectedAction">
          <label class="sbw_light">Parameters:</label><br />

          <ng-template *ngFor="let parameter of steps[in].SelectedAction.UIParameters">
            <label class="sbw_light">{{parameter.ParameterEnum}}</label><br />
            <input (change)='onChange()' type="text" [(ngModel)]="steps[in].Parameters" name="parameter_name_{{in}}" class="form-control" #name="ngModel" required />
          </ng-template>

        </div>
      </div>
    </div>

    <button id="addStepBtn" type="button" class="btn btn-light" (click)="addScenarioStep()">Add Scenario Step +</button>
  </form>`
})

export class ScenarioStepEditorComponent implements OnInit {
  @Output() onSelectValue = new EventEmitter<{stepInputs: any[]}>();

  steps = [];
  availableActions: Action[];

  constructor(private actionService: ActionService) {}

  ngOnInit(): void {
    this.actionService.list().subscribe( result => {
      this.availableActions = result;
    },
    error => console.log('Error getting actions...') );
  }

  /* When user picks an option, save the chosen action with the rest of the parameters*/
  onChange() {
    for (let i = 0; i < this.steps.length; i++) {
      let actionIndex = this.availableActions.findIndex(a => a.Name === this.steps[i].Action);
      this.steps[i].SelectedAction = this.availableActions[actionIndex];
    }
    this.onSelectValue.emit( {stepInputs: this.steps} );
  }

  addScenarioStep() {
    this.steps.push({value: ''});
  }
}