如何在angular 4中单击按钮添加新行

我有下面的代码来创建一行和一个按钮addperson。单击AddPerson，我想用Person2、Person3等多创建一行。 . 我怎样才能做到这一点

<div class="splitTheBill-row">
        <div class="splitTheBill-left">
          <div class="userIcon">
            <div class="splitTheBill-user">
              <img src="assets/images/person.png" alt="My Profile">
            </div>
            <div class="input-field national-id pull-left">
              <input id="form3" class="form-control" type="text">
              <label for="form3" class="">Person 1</label>
            </div>
          </div>
        </div>
        <div class="splitTheBill-right">
          <div class="input-field national-id pull-left">
            <input id="form4" class="form-control" type="text">
          </div>
        </div>
      </div>
      <div class="addperson-btncont">
        <div class="reg-submitCont">
          <button url="#" class="btn-secondary waves-effect waves-light btn">Add Person</button>
        </div>
      </div>

您需要使用*ngFor在人员中循环，如下所示：

  <div class="splitTheBill-left">
    <div *ngFor="let person of persons">
      <div class="userIcon">
        <div class="splitTheBill-user">
          <img src="assets/images/person.png" alt="My Profile">
        </div>
        <div class="input-field national-id pull-left">
          <input id="form3" class="form-control" type="text">
          <label for="form3" class="">{{person.name}}</label>
        </div>
      </div>
    </div>
  </div>

要添加一个新行，只需将一个新人推到该数组中即可

  this.persons.push({"name": "Person " + (this.persons.length + 1)})

您需要使用*ngFor在人员中循环，如下所示：

  <div class="splitTheBill-left">
    <div *ngFor="let person of persons">
      <div class="userIcon">
        <div class="splitTheBill-user">
          <img src="assets/images/person.png" alt="My Profile">
        </div>
        <div class="input-field national-id pull-left">
          <input id="form3" class="form-control" type="text">
          <label for="form3" class="">{{person.name}}</label>
        </div>
      </div>
    </div>
  </div>

要添加一个新行，只需将一个新人推到该数组中即可

  this.persons.push({"name": "Person " + (this.persons.length + 1)})

---

我认为您在这里寻找的是一种反应式表单，可以在表单中动态添加人员：

这里有一个最小的模板：

<form [formGroup]="personsForm" (submit)="onFormSubmit()">
  <div formArrayName="persons">
    <div *ngFor="let person of persons; let i = index;" [formGroupName]="i">
      Name: <input type="text" formControlName="name"><br>
      Amount: <input type="text" formControlName="amount">
    </div>
  </div>
  <button type="button" (click)="addPerson()">
    Add Person
  </button>
  <button>
    Submit
  </button>
</form>

下面是组件类：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component(...)
export class AppComponent {
  personsForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.personsForm = this.fb.group({
      persons: this.fb.array([])
    });
  }

  onFormSubmit() {
    alert(JSON.stringify(this.personsForm.value));
  }

  addPerson() {
    (<FormArray>this.personsForm.get('persons')).push(this.fb.group({
      name: [],
      amount: []
    }));
  }

  get persons() {
    return (<FormArray>this.personsForm.get('persons')).controls;
  }
}

---

这里有一个供您参考的表单。

我想您需要的是一个反应式表单，可以在表单中动态添加人员：

这里有一个最小的模板：

<form [formGroup]="personsForm" (submit)="onFormSubmit()">
  <div formArrayName="persons">
    <div *ngFor="let person of persons; let i = index;" [formGroupName]="i">
      Name: <input type="text" formControlName="name"><br>
      Amount: <input type="text" formControlName="amount">
    </div>
  </div>
  <button type="button" (click)="addPerson()">
    Add Person
  </button>
  <button>
    Submit
  </button>
</form>

下面是组件类：

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component(...)
export class AppComponent {
  personsForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.personsForm = this.fb.group({
      persons: this.fb.array([])
    });
  }

  onFormSubmit() {
    alert(JSON.stringify(this.personsForm.value));
  }

  addPerson() {
    (<FormArray>this.personsForm.get('persons')).push(this.fb.group({
      name: [],
      amount: []
    }));
  }

  get persons() {
    return (<FormArray>this.personsForm.get('persons')).controls;
  }
}

---

这里有一个供您参考的链接。

您可以在组件中发布表单创建吗？我没有使用任何表单来创建此链接。这是我的HTML编码的一部分，请在组件中发布表单创建，好吗？我没有使用任何表单来创建它。这是我的HTML代码的一部分。每次点击一个按钮，它都会添加Person 2，Person 2。理想情况下，我想要第二个人、第三个人、第四个人、第五个人……@Nancy，对你的情况来说，使用反应表单将是一种更好的方法。@Nancy That；'因为名字是硬编码的。我刚刚更新了答案，它创建了两次人1，然后是人2，人3，人4。。。我也添加了一个图像。代码中应该有一个+1，我也更新了它，看看这个例子，它应该是Person+this.persons.length+1}它每次点击按钮都会添加Person 2，Person 2。理想情况下，我想要第二个人、第三个人、第四个人、第五个人……@Nancy，对你的情况来说，使用反应表单将是一种更好的方法。@Nancy That；'因为名字是硬编码的。我刚刚更新了答案，它创建了两次人1，然后是人2，人3，人4。。。我还添加了一个图像。代码中应该有+1，我也更新了它，看看这个例子，它应该是Person+this.persons.length+1}