动态添加未呈现

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。

2. 不要改变数组。代替

this.steps.push(newElem);

做

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