通过带angular的ngFor指令向数组添加新对象

Question

我尝试通过ngFor指令(用户输入)显示n个对应于用户实例的文件，但我的问题是，在验证后将此对象值放入此数组的最佳方法是单击按钮。

  <ul style="list-style-type: none">
  <li *ngFor="let number of nbCollaborateur">
    <div class="row" >
      <div class="col-md-3">
        <label class="control-label">Nom et prenom </label>
        <input type="text" class="form-control">

        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">telephone</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">adresse</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">commantaire</label>
            <input type="text" class="form-control">
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

我的数组将如下所示：

users: User[];
this.users.push(new User());

Answer 1

我在你的html中没有看到任何按钮。但您可以在组件中处理验证逻辑，然后推送到数组中。

如果你添加一个新的项到数组，它会自动添加到模板中，就像你有*ngFor循环一样。

以下是一些适用于您的用例的有用链接：

https://www.youtube.com/watch?v=xYv9lsrV0s4&t=804s

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html