动态添加 <input> 没有被渲染

Question

I have a string which holds a form that I want to dynamically render.

When the user clicks "Add Step", my template string is added to a list and rendered with an ngFor . The problem is that the input doesn't render, only the <h3> tag.

Before button click:

After - no input is rendered on screen or in the 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. Put that whole thing

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

in the template, not the TS.

2. Don't mutate the array. Instead of

this.steps.push(newElem);

do

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