Question

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

由于

Answer 1

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

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

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

1 个答案: