Question

我在角度2中创建了一个Web。我有一个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>

然后你可以绑定到一个按钮的（点击）事件来切换布尔＆＃39; isShowing＆＃39;点击时：

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

在Angular 2中操纵Dom

1 个答案: