角を操作する2

Question

私はアンギュラ2でウェブを作成しています。カスタムボタンがクリックされたときに2つの入力と1つの削除ボタンを追加するJqueryコードがあるので、ユーザーが削除ボタンをクリックすると削除されます入力（DOMを操作する）

のjQueryコード：

//Adiciona campos extra nos sócios 
    var campos_max = 10; //max de 10 campos 
    var x = 1; // campos iniciais 

     $('#add_field').click (function(e) { 
      e.preventDefault();  //prevenir novos clicks 
       if (x < campos_max) { 
         $('#listas').append('<div>\ 
           <div class="form-group">\ 
     <label class="col-sm-2 control-label">Nome sócio:</label>\ 
     <div class="input-group">\ 
      <span class="input-group-addon">*</span>\ 
       <input class="form-control socio" name="nome[]" type="text" placeholder="Nome sócio..." required>\ 
     </div>\ 
      </div>\ 
      <div class="form-group">\ 
     <label class="col-sm-2 control-label">Participação (%):</label>\ 
     <div class="input-group">\ 
      <span class="input-group-addon">*</span>\ 
       <input class="form-control socio part" name="participacao[]" type="text" placeholder="Participação..." required number="true">\ 
     </div>\ 
      </div>\ 
      <input href="#" type="button" id="add_field" value="Remover campo" class="remover_campo btn btn-warning">\ 
           </div>'); 
         x++; 
       } 
     }); 

     // Remover o div anterior 
     $('#listas').on("click",".remover_campo",function(e) { 
       e.preventDefault(); 
       $(this).parent('div').remove(); 
       x--; 
     }); 

私は角2でこれを行うことができますどのように？ elementRefとRendererについて読みましたが、私はとても混乱しています。

Answer 1

AngularではJavaScriptからページにHTMLを挿入しません。 （可能ですが、良い方法ではありません）

すべてのHTMLは、必要に応じて要素を追加および削除するために、* ngIfタグで囲まれたテンプレート内にある必要があります。クリックされたとき

<div *ngIf="isShowing"> your HTML here </div> 

その後、あなたはブール「のisShowing」を切り替えるには、ボタンの（クリック）イベントにバインドすることができます

<div> 
    <h2>form</h2> 
    <form> 
    <div *ngIf="showForm"> 
     <input type="text"> 
     <input type="text"> 
     <button type="button" (click)="showForm=false">hide form</button> 
    </div> 
    <button *ngIf="!showForm" type="button" (click)="showForm=true">show form</button> 
    </form> 
</div> 

：

は

<input (click)="isShowing=false"> 

だから、最終的な形は次のようになります。