tsファイルからhtmlファイルに入力フィールドを追加するには？

Question

私は次のようにhtmlファイルに次のコードを書いています。 samplecomponent.html

<div class="col-12"> 
    <form > 
     <input type="text" name="firstname" class="form-control"> 
     <button>Add field</button> 
    </form> 
</div> 

今すぐフィールドを追加]をクリックの上に私はいくつかの名前のテキストフィールドを生成する必要があります。テキストフィールドは、フィールドの追加ボタンのクリックごとに生成する必要があります。追加フィールドを2回押すと、2つのフィールドに値を設定する必要があります。これを達成するには？任意の提案、ウォークスルー。

Answer 1

あなたが入力にループに

<div class="col-12"> 
    <form > 
     <input *ngFor="let item of items" [(ngModel)]="item.fName" type="text" name="firstname" class="form-control"> 
     <button (click)="addNew()">Add field</button> 
    </form> 
</div> 

をngForを使用し、ボタンを

export class AppComponent { 
    items: Object[]; 


    constructor(){ 
    this.items = []; 
    } 

    addNew(): void { 
    this.items.push({ 
     name:'', 
     id: this.items.length + 1 
    }) // push what ever you want 
    } 
} 

Demo

をクリックすると、配列にアイテムをプッシュする方法を追加することができます