動態添加 <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。

2. 不要改變數組。 代替

this.steps.push(newElem);

做

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