时间戳

首页 > 解决方案 > 如何在单击角度 4 中的按钮时添加新行

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

问题描述

在此处输入图像描述我有下面的代码来创建一行和一个按钮 Add Person。单击添加人员后，我想再创建一行，其中包含人员 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>

标签： angularbuttonclickrowadd

解决方案

您需要使用*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)})

查看官方教程以获取更多信息

推荐阅读