填充/修补角度反应形式的值

Question

我正在努力使用angular 4进行crud应用程序，我想知道，我如何使用打开表单的按钮在同一行中解析的数据填充我的反应形式，表单在ngx-bootstrap模式中它应该与我在另一个按钮上添加新项目/对象相同？

这是代码，我希望我能正确地向你提出我的问题......

我应该注意到我有一个工作表单用于添加新员工，并且想要使用相同的一个，但是想要用我点击的对象的值填充表单/在编辑按钮所在的行...（抱歉缺乏更好的解释）所以我有一类我的对象

        export class employee {
        UserId: string;
        FirstName: string;
        LastName: string;
        Email: string;
        }

在我的app.component.ts中

     ngOnInit() {
    // populates table with current users in database onInit
    this.LoadAllEmployees();


    this.form = this.formBuilder.group({
        FirstName: [null, [Validators.required, Validators.minLength(2)]],
        LastName: [null, Validators.required],
        Email: [null, [Validators.required, Validators.email]],

    });

       }

    onSubmit() {
    if (this.form.valid) {
        console.log("Form Submitted!", this.form.value);
        this.form.reset();
        this.modalRef.hide();

    }
    else {
        this.validateAllFormFields(this.form)
    }
     }

    Save(myForm: NgForm) {
    this.GetDemoObject(myForm);
    this.AddEmployee(this.Demoemployee);
    }

    GetDemoObject(myForm: NgForm): employee {
    this.Demoemployee = new employee;
    this.Demoemployee.FirstName = myForm.value.FirstName;
    this.Demoemployee.LastName = myForm.value.LastName;
    this.Demoemployee.Email = myForm.value.Email;
            return this.Demoemployee;
     }

在我的app.component.html中有一个表和ngx-bootstrap调用

      <table style="width:100%" class="table table-striped" 
     id="billing_history_table">
     <thead class="head">
        <tr>
            <th>Employee Name</th>
            <th>Mail</th>
            <th></th>

        </tr>
        </thead>
       <tbody>
        <tr *ngFor="let e of employeelist; let i = index ">
            <td>{{e.firstName + '&nbsp;' +e.lastName}}</td>
            <td>{{e.positionId}}</td>
            <td>{{e.email}}</td>
           <td><a (click)="openModal(template)"><span class="glyphicon 
             glyphicon-edit"></span></a></td>
           </tr>
           </tbody>
           </table>
       </div>

      <ng-template #template>

       <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-
     label="Close" (click)="modalRef.hide()"><span aria-hidden="true">&times;
    </span></button>
        <h4 class="modal-title" id="myModalLabel">Add new user</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
   (ngSubmit)="onSubmit(myForm.value)">


            <div class="form-group" [ngClass]="displayFieldCss('FirstName')">
                <label for="FirstName" class="control-label required">First 
      name</label>
                <input type="text" id="FirstName" class="form-control" 
       formControlName="FirstName">

                <app-field-error-display 
      [displayError]="isFieldValid('FirstName')"
                                         errorMsg="First name is not valid!">
                </app-field-error-display>
            </div>

            <div class="form-group" [ngClass]="displayFieldCss('LastName')">
                <label for="LastName" class="control-label required">Last 
        name</label>
                <input type="text" id="LastName" class="form-control" 
       formControlName="LastName">
                <app-field-error-display 
        [displayError]="isFieldValid('LastName')"
                                         errorMsg="Last name is not valid!">
                </app-field-error-display>
            </div>

            <div class="form-group" [ngClass]="displayFieldCss('Email')">
                <label for="Email" class="control-label 
        required">Email</label>
                <input type="text" id="Email" class="form-control" 
       formControlName="Email">
                <app-field-error-display 
        [displayError]="isFieldValid('Email')"
                                         errorMsg="Email is not valid!">
                </app-field-error-display>
            </div>



            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-
         dismiss="modal" (click)="modalRef.hide()">Close</button>
                <button type="submit"
                        class="btn btn-primary" (click)="Save(myForm)">
                    Submit
                </button>

            </div>

        </form>
    </div>

       </div>
     </ng-template>

请任何人给我一些指示，类似的事情或任何建议的例子，请...