在角2中操纵DOM

Question

我在Angular2中创建一个网络。我有一个jQuery代码，可以在单击自定义按钮时添加2个输入和1个删除按钮，因此，当用户单击删除按钮时，它删除输入（操纵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--;
        });

如何在Angular 2中执行此操作？我读了有关ElementRef和Renderer的信息，但我很困惑。

Answer 1

在Angular中，您不会从JavaScript中注入HTML。（您可以，但这不是一个好习惯）

所有的HTML都应在您的模板中，并用 *ngif标签包装以在需要时添加和删除元素。

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

然后，您可以绑定到按钮（单击）事件，以切换布尔值" iSshowing"：

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

因此，最终表格应该看起来像这样：

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