ngModel, нажмите не работает в Angular 4 в динамически добавляемом HTML

Question

Я пытаюсь добавить HTML, указав идентификатор. HTML показывает, но ngModel и нажмите не работает. Как я могу заставить это работать?

app.component.html

<div id="myid">

</div>

app.component.ts

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

   mytext = "add something"
   constructor(private myElement: ElementRef) {}
   ngOnInit() {
    this.addDiv()
  }
  pop(){
   alert("hello")
  }
  addDiv(){
    var div = document.createElement('div');
    div.innerHTML = `<div>
          <input type="text" [(ngModel)]="mytext">
           <button type="button" class="btn (click)="pop()">Basic</button>
        </div>`;
    this.myElement.nativeElement.querySelector('#myid').append(div)
  }
}

Answer 1

Нельзя использовать специфический для углов синтаксис шаблона, если вы создаете HTML на лету и устанавливаете его с помощью innerHTML. Все угловые шаблоны компилируются во время сборки. Определенные угловые вещи, такие как (click)="..."", просто не будут работать.

В любом случае, как уже говорили другие, вы не должны манипулировать вашим html напрямую при работе с angular.

Создайте свой компонент так:

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    // This field will control the visibility of your section
    isDivVisible = false;
    mytext = 'add something';
    constructor(private myElement: ElementRef) { }
    ngOnInit() {
        this.isDivVisible = true;
    }
    pop() {
        alert('hello');
    }
}

Вместо того, чтобы вручную создавать элемент dom, мы просто хотим использовать переменную isDivVisible для управления видимостью div.

В вашем шаблоне сделайте что-то вроде этого:

<div *ngIf="isDivVisible">
    <input type="text" [(ngModel)]="mytext">
    <button type="button" class="btn" (click)="pop()">Basic</button>
</div>

Div с директивой *ngIf будет виден, только если для переменной isDivVisible установлено значение true. Вы можете легко скрыть это снова, установив isDivVisible в false.

Краткое примечание. Если вы используете метод ngOnInit, ваш компонент также должен реализовывать интерфейс OnInit.

Answer 2

CornelC правильно утверждает, что это плохая практика. В прошлом я использовал реактивные формы и массивы форм. Здесь есть ответ, который подробно описывает настройку реактивной формы с массивом форм:

Как динамически добавлять и удалять поля формы в Angular 2

Как отступление: вы не закрыли свой атрибут класса закрывающей кавычкой, и вам необходимо закрыть строку шаблона с закрывающей `:

div.innerHTML = `<div>
      <input type="text" [(ngModel)]="mytext">
       <button type="button" class="btn (click)="pop()">Basic</button>
    </div>;

Изменить на:

div.innerHTML = `<div>
      <input type="text" [(ngModel)]="mytext">
       <button type="button" class="btn" (click)="pop()">Basic</button>
    </div>;`