Angular 2在按键上附加输入元素

时间:2017-07-20 14:03:53

标签: angular

在Angular 2中附加DOM元素(在我的情况下输入)的最佳方法是什么?

我是否必须使用ComponentFactoryResolver或者更简单的方法来处理这些简单的事情?

我需要这个 - 当用户在输入中键入内容时,在下面添加相同的输入(仅在第一个键入的字母上添加一次)。

之后,我需要相同的追加功能,但只需要在最后一次输入时等等...... 例如,当您想要输入更多属性时,我会通过添加另外一个文件来让您更轻松...

以下是使用JQuery解决的示例:

$(document).on("keypress", ".addanother", function ()
{   
    $(".inputList").append('<div class=\"row\"><div class=\"col-lg-5\"><input type="text" placeholder="Attribute" class="form-control addanother" /></div>' +
                                                '<div class=\"col-lg-5\"><input type="text" placeholder="Value" class="form-control"/></div></div>');
    $(this).removeClass("addanother");
});

由于

1 个答案:

答案 0 :(得分:0)

是的,你应该看一下文档。然而,第一种方法可能是这样的:

HTML:

<button (keypress)="addAnother()">add</button>
<div *ngFor="let form of formdivs">
  <div class="row">
    <div class="col-lg-5">
      <input type="text" placeholder="Attribute" class="form-control addanother" /></div>
    <div class="col-lg-5"><input type="text" placeholder="Value" class="form-control" /></div>
  </div>
</div>

然后,在控制器中:

 public formdivs: any[] = [];

  addAnother(): void {
    this.formdivs.push({});//Add info for new div if needed
  }

希望以此为出发点。 css的一部分可能会放在按钮中,如下所示:

[ngClass]="{'addAnother': formdivs.length == 0}"