Html 无法在angular4中使用Renderer2创建动态文本框

我正在使用Angular 4，通过使用Renderer2单击按钮动态创建文本框。我首先在一个虚拟项目上尝试了它，它工作得很好，但是当我把代码放在我的真实项目中时，它不会工作，控制台上也没有错误，我已经通过将console.log放进去检查函数是否触发，函数是否触发，消息是否显示在控制台中，但是创建代码的文本框不起作用。有人能帮我吗

类型脚本函数

constructor(private renderer:Renderer2, private el: ElementRef ) { }

addfield()  {

  console.log('function triggered');
  const div = this.renderer.createElement('div');
  const input = this.renderer.createElement('input');

  this.renderer.appendChild(div, input);

  this.renderer.addClass(div, 'col-md-6');
  this.renderer.addClass(div, 'col-sm-6');
  this.renderer.addClass(div, 'col-xs-12');

  console.log('cross passes the code');
  this.renderer.addClass(input, 'form-control');
  this.renderer.addClass(input, 'col-md-7');
  this.renderer.addClass(input, 'col-xs-12');

}

Html代码

<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

添加新领域+

您的代码绝对是好的，唯一的问题是您并没有动态创建附加 将元素添加到ui中

组件：

constructor(private renderer:Renderer2, private el: ElementRef ) {}

addfield()  {
    ....
    const textboxes = document.getElementById('textboxes');
    this.renderer.appendChild(textboxes, div);
}

模板：

<div id="textboxes"></div>

<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

增加新领域+

---

以下是工作演示的链接：

试着这样做：

缺少以下行以添加动态文本框

this.renderer.appendChild（this.el.nativeElement，div）

addfield() {
    const div = this.renderer.createElement('div');
    const input = this.renderer.createElement('input');

    this.renderer.appendChild(div, input);
    this.renderer.addClass(div, 'col-md-6');
    this.renderer.addClass(div, 'col-sm-6');
    this.renderer.addClass(div, 'col-xs-12');

    this.renderer.addClass(input, 'form-control');
    this.renderer.addClass(input, 'col-md-7');
    this.renderer.addClass(input, 'col-xs-12');

    this.renderer.appendChild(this.el.nativeElement, div);
}

<div id="textboxes"></div>
<button class="btn btn-success" (click)="addfield()" >Add New Fiels +</button>

constructor(private renderer: Renderer2) {
}

addfield()  {
....
const textboxes = document.querySelector('#textboxes'); //to get element
this.renderer.addClass(textboxes , "col-md-6"); //this is for add class 
let divel= this.renderer.createElement('div'); //this is for create an element 
this.renderer.appendChild(textboxes, divel);   //this is for append a child element 

 }