如何在单击角度 4 中的按钮时添加新行答案

【问题标题】：How to add a new row on click of a button in angular 4如何在单击角度 4 中的按钮时添加新行
【发布时间】：2018-11-09 08:24:34
【问题描述】：

我有下面的代码来创建一行和一个按钮添加人员。单击添加人员后，我想再创建一行，其中包含人员 2、人员 3 等。。我怎样才能实现它。

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

【问题讨论】：

你能把表单的创建贴在组件里吗？
我没有使用任何形式来创建它。这是我的 HTML 代码的一部分

标签： angular button click row add

【解决方案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>

然后，您可以在 TS 中创建一个代表人的数组：

  persons = [
      {"name": "Person 1"}
  ]

要添加新行，您只需将新人推入该数组即可

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

Take a look at the official tutorial for more info

【讨论】：

每次单击按钮时都会添加 Person 2 ， Person 2 。理想情况下，我想要第 2 个人、第 3 个人、第 4 个人、第 5 个人 ....
@Nancy，使用 ReactiveForms 将是适合您的情况的更好方法。
@Nancy That; 因为名字是硬编码的。我刚刚更新了答案
它会创建 Person 1 两次，然后创建 Person 2、Person 3、Person 4...我也添加了一张图片。
该代码中也应该有一个+1（我更新了它），看看这个例子，它应该是"Person " + (this.persons.length + 1)})

【解决方案2】：

我认为您在这里寻找的是一种反应式表单，它可以即时将人员添加到表单中：

这是一个最小的模板：

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

这里有一个Sample StackBlitz 供您参考。

【讨论】：