Блог

Главная - Вопросы по программированию - Динамически добавленный не отображается

Динамически добавленный не отображается

#javascript #angular #typescript

#javascript #угловатый #машинописный текст

Вопрос:

У меня есть строка, которая содержит форму, которую я хочу динамически отображать.

Когда пользователь нажимает «Добавить шаг», строка моего шаблона добавляется в список и отображается с ngFor помощью . Проблема в том, что входные данные не отображаются, только <h3> тег.

Перед нажатием кнопки:

введите описание изображения здесь

После — ввод не отображается ни на экране, ни в html:

введите описание изображения здесь

тс:

 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>

Комментарии:

1. Синтаксис Angular {{i}} и [ngModel] не будет учитываться при визуализации с [innerHTML] привязкой. Есть ли причина вставлять шаблон с [innerHTML] вместо того, чтобы помещать эту разметку в шаблон компонента? Кстати, вы можете предпочесть этот синтаксис привязки для атрибута: [attr.stepId]="i" .

2. @ConnorsFan Ваш комментарий может быть ответом. Кажется, это вопрос XY — просто неправильный инструмент для работы

Ответ №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];

Комментарии:

1. Мне нужно добавить новые элементы формы во время выполнения, я не смогу этого сделать, если не изменю массив

2. this.steps = [...this.steps, newElem] создает новый массив с включенными старыми и новыми элементами и запускает обнаружение изменений, в то время как изменение массива этого не делает.

3. Ах, извините — я неправильно понял, постараюсь в ближайшее время

Метки: