ang4でRenderer2を使ってダイナミックテキストボックスを作成する

Question

私はAngular 4で作業しており、Renderer2を使用してボタンをクリックすることで動的にテキストボックスを作成しています。私はダミーのプロジェクトで最初に試してみましたが、うまくいきましたが、私の実際のプロジェクトにコードを入れてもうまくいかず、コンソールにエラーもなく、コンソールを置くことによって機能が起動しているかどうかを確認しました。それにログインして、機能が起動していて、コンソールにメッセージが表示されていますが、コードを作成しているテキストボックスが機能していません。誰もがこれで私を助けることができますか？

タイプのスクリプト機能

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> 

Answer 1

あなたのコードは絶対に大丈夫です、唯一の問題は、あなたがUI

に動的に作成 要素を追加していないです

Componen T：

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> 

---

作業のデモへのリンクです：

https://stackblitz.com/edit/angular-dynamic-textbox

Answer 2

は次のように試してみてください。

あなたは喜ばも答えをupvoteだろう、ダイナミックテキストボックス

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