如何以角度将输入字段从ts文件添加到html文件？

【问题标题】：How to add an input field from ts file to html file in angular?如何以角度将输入字段从ts文件添加到html文件？
【发布时间】：2017-12-22 16:56:10
【问题描述】：

我在 html 文件中有以下代码，如下所示。示例组件.html

<div class="col-12">
    <form >
        <input type="text" name="firstname" class="form-control">
        <button>Add field</button>
    </form>
</div>

现在单击添加字段时，我必须生成一个带有某些名称的文本字段。必须根据单击添加字段按钮生成文本字段。如果我们按两次添加字段，则必须填充两个字段。如何实现这一目标？任何建议，演练。

【问题讨论】：

标签： angular angular5 angular4-forms

【解决方案1】：

您可以使用ngFor 循环输入

<div class="col-12">
    <form >
        <input *ngFor="let item of items" [(ngModel)]="item.fName" type="text" name="firstname" class="form-control">
        <button (click)="addNew()">Add field</button>
    </form>
</div>

然后添加一个方法，在按钮点击时将一个项目推送到数组中

export class AppComponent  {
  items: Object[];


  constructor(){
    this.items = [];
  }

  addNew(): void {
    this.items.push({
      name:'',
      id: this.items.length + 1
    }) // push what ever you want
  }
}

Demo

【讨论】：