Question

我想通过定位ID来添加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

CornelC说这是不好的做法是正确的。在过去，我使用了反应形式和形式数组。这里有一个答案，提供了使用表单数组设置反应形式的详细信息：

How to dynamically add and remove form fields in Angular 2

顺便说一下：你还没有用结束引号关闭你的class属性，你需要关闭模板字符串并关闭`：

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>;`

Answer 2

如果您动态创建html并通过innerHTML设置它，则无法使用特定于角度的模板语法。在构建期间编译所有角度模板。像(click)="...""这样的角度特定的东西根本不起作用。

无论如何，正如其他人所说的那样，在处理角度时你不应该直接操纵你的html。

像这样创建你的组件：

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');
    }
}

我们只想使用isDivVisible变量来控制div的可见性，而不是手动创建dom元素。

在您的模板中执行以下操作：

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

只有将*ngIf变量设置为true时才会显示带isDivVisible指令的div。您可以通过将isDivVisible设置为false来轻松隐藏它。

简短说明：如果使用ngOnInit方法，组件也应该实现OnInit接口。

ngModel，在动态添加的html中单击不在角度4中工作

2 个答案: