我有一个表单，希望用户可以根据需要生成或删除一行输入。最好的方法是什么？我相信我必须在我的html文件中包括这个地方。 *ngFor="let userline of users"。

这是当前表单的外观。当按下绿色的“ +”号时，我想填充一个新行。同样，当单击红色的“ x”时，我希望删除该行。

form.component.html

<h3 align="center">Requested Dates</h3>
            <!-- PrimeNG InputName -->
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-1" id="test">
                    <button pButton type="button" id="deleteButton" icon="pi pi-times" class="ui-button-danger" (click)="onRemoveclicked()"></button>
                </div>


                <div class="ui-g-12 ui-md-2" id="test">
                    <!-- <label for="name">Name</label> -->
                    <input type="text" pInputText name="fname" class="form-control" [(ngModel)]="user.name" placeholder="Name" />
                </div>


                <div class="ui-g-12 ui-md-2">

                    <p-dropdown [options]="leave2" [(ngModel)]="selectedLeave2" (ngModelChange)='setLeave($event)' name="selectedLeave2" placeholder="Select Leave Code *" optionLabel="name"></p-dropdown>
                </div>
<div class="ui-g-12 ui-md-2" id="test">
                    <p-calendar [showIcon]="true" [(ngModel)]="user.fromDate" name="fromDate" placeholder="From Date*" dateFormat="mm.dd.yy">
                    </p-calendar>
                </div>
<div class="ui-g-12 ui-md-1" id="test">
                    <!-- <label for="fromTime">From Time</label> -->
                    <input type="text" pInputText name="lname" class="form-control" [(ngModel)]="user.fromTime" placeholder="From Time*" />
                </div>
<div class="ui-g-12 ui-md-2" id="test">
                    <p-calendar [showIcon]="true" [(ngModel)]="user.toDate" name="toDate" placeholder="To Date*">
                    </p-calendar>
                </div>
<div class="ui-g-12 ui-md-1" id="test">
                    <!-- <label for="toTime">To Time</label> -->
                    <input type="text" pInputText name="lname" class="form-control" [(ngModel)]="user.toTime" placeholder="To Time*" />
                </div>
<br>

                <div class="ui-g-12 ui-md-2" id="test">
                    <input type="submit" value="save" class="btn btn-success">
                </div>
                <button pButton type="button" id="addButton" icon="pi pi-plus" class="ui-button-success" (click)="onAddClicked()"></button>
                <!-- </div> -->
            </div>
        </div>
    </form>

form.component.ts

import { Component,OnInit } from '@angular/core';
import{User}  from '../user';
import{Router}  from '@angular/router';
import{UserService}  from '../shared_service/user.service';

interface Supervisor {
  name: string;
  code: string;
}

interface Leave {
  name: string;
  code: string;
}

@Component({
  selector: 'app-form',templateUrl: './form.component.html',styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  private user:User;

  constructor(private _userService:UserService,private _rotuer: Router) {
    this.supervisor2 = [
      { name: 'Samuel Chan',code: 'SC' },{ name: 'Max Cardone',code: 'MC' },{ name: 'Kylie Brooks',code: 'KB' },];

    this.leave2 = [
      { name: 'Personal Leave',code: 'PL' },{ name: 'Sick Leave',code: 'SL' },{ name: 'Vacation Leave',code: 'VL' },{ name: 'Any Leave',code: 'AL' }
    ];
  }

  ngOnInit() {
   this.user =this._userService.getter();
   this.user = { id: null,name:'',fromDate: '',fromTime:'',toDate:'',toTime:'',selectedSupervisor2:'',selectedLeave2:'',};
   //this._userService.getter();
  }


  supervisor2: Supervisor [];
  selectedSupervisor2: Supervisor;

  leave2: Leave [];
  selectedLeave2: Leave;

  //  seefromDate(event) {
  //    console.log(event);
  //  }

 // Method to Add row of dates on button click. Will go up to 7 fields
  onAddClicked() {
    if (this.dates.length < 8) {
      this.dates.push({ leaveCode: "",fromDate: "",fromTime: "",toDate: "",toTime: "" })
        ;
    }
  }
  // Method to remove dates on button click. Will always have one date field displayed
  onRemoveclicked() {
    if (this.users.length > 1) { this.users.pop(); }
  }
  setSupervisor(event){
    if (event && event.name)
    this.user.selectedSupervisor2 = (event.name);
  }

  setLeave(event){
    if (event && event.name)
    this.user.selectedLeave2 = (event.name);
  }


  processForm(){

    console.log(this.user);
    if(this.user.id==undefined){
       this._userService.addItem(this.user).subscribe((user)=>{
         console.log(user);
         this._rotuer.navigate(['/table']);
       },(error)=>{
         console.log(error);
       });
    }else{
       this._userService.saveOrupdateItem(this.user).subscribe((user)=>{
         console.log(user);
         this._rotuer.navigate(['/table']);
       },(error)=>{
         console.log(error);
       });
    }
  }
}

user.ts

export class User {
    id:Number;
    name:String;
    fromDate: String;
    fromTime:String;
    toDate: String;
    toTime:String;
    selectedSupervisor2: String;
    selectedLeave2: String;
}