新しいオブジェクトを配列に追加する

Question

これは、ユーザーインスタンスに対応するngForディレクティブ（ユーザー入力）でn個のファイルを表示するために苦労しています。しかし、私の質問は、このオブジェクト値を入れるための最良の方法ですこの配列では、検証後にbuttomをクリックします。

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

私の配列は次のようになります。私はあなたのhtml内の任意のボタンを見ていないです

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

Answer 1

。しかし、コンポーネント内で検証ロジックを処理し、配列にプッシュすることができます。

配列に新しい項目を追加すると、* 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