动态添加的<input />不会呈现

Question

我有一个字符串，其中包含我要动态呈现的表单。

当用户单击“添加步骤”时，我的模板字符串将添加到列表中并使用ngFor进行呈现。问题在于输入仅呈现<h3>标签而不呈现。

在单击按钮之前：

之后-屏幕上或html中均未呈现任何输入：

ts：

scenarioTemplate = `
  <div id="content">
    <h3>Name</h3>
    <input name="{{i}}" [ngModel]="i">
  </div>`;

steps = [];

addScenarioStep() {
    this.steps.push(this.scenarioTemplate);
}

html：

<form #myForm="ngForm">
  <fieldset ngModelGroup="inputs" #inputs="ngModelGroup">
    <ng-container *ngFor="let step of steps; let i = index">
      <div [innerHTML]=step attr.stepId="{{i}}"></div>
    </ng-container>
  </fieldset>
</form>
<button id="addStepBtn" type="button" class="btn btn-light" (click)="addScenarioStep()">Add Scenario Step +</button>

Answer 1

1. 把整个东西都放

  <div id="content">
    <h3>Name</h3>
    <input name="{{i}}" [ngModel]="i">
  </div>

而不是TS中的模板。

1. 请勿更改数组。代替

this.steps.push(newElem);

做

this.steps = [...this.steps, newElem];