如何使用模态对话框 Angular 2 编辑 ngxdatatable

• 我想做的事

  我的ngxdatatable中有办公室名称和部门的列表。每个 officename 都有一个编辑和删除按钮，用户可以使用它来编辑和删除 office name/dept。

  对于编辑部分，我希望在单击编辑按钮（链接到编辑功能）时弹出一个模态对话框，并显示办公室名称和部门详细信息。和用户可以编辑办公室名称和/部门保存它。

• 我所取得的成就

  当用户单击编辑按钮时，我设法让模态对话框弹出。不知何故，将原始值传递给编辑模式对话框时出现问题。

• 我的问题

  我想将我的原始值传递给模态对话框（处理它）并允许用户编辑 officename/dept 并保存编辑的详细信息。

我的代码，这是我的模态对话框

<div bsModal #editOffice="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form [formGroup]="EditOfficeForm" (ngSubmit)="EditOfficeForm.valid && updateOffice(EditOfficeForm.value)" novalidate>

                <div class="modal-header">
                    <button type="button" class="close" (click)="editOffice.hide()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit Office</h4>
                </div>

                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="text"> Office Name</label>
                        <div class="col-md-4">
                            <input #officeName type="text" id="officeName" name="officeName" class="form-control" formControlName="officeName" value="{{editingData.officeName}}">
                            <div class='redColor' *ngIf="EditOfficeForm.controls.officeName.touched">
                                <div *ngIf="EditOfficeForm.controls.officeName.hasError('required')">
                                    Required.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="text"> Date </label>
                        <div class="col-md-4">
                            <input #dept type="text" id="dept" name="dept" class="form-control  ng-pristine ng-valid ng-touched"
                                formControlName="dept" value="{{editingData?.dept}}">
                            <div class='redColor' *ngIf="EditHolidayForm.controls.dept.touched">
                                <div *ngIf="EditHolidayForm.controls.dept.hasError('required')">
                                    Required
                                </div>
                            </div>
                        </div>
                    </div>   

                    <button type="button" class="btn btn-space pull-right" (click)="editOffice.hide()" aria-label="Close"> Cancel </button>&nbsp;
                    <button class='btn btn-primary' type='submit' (click)="editOffice.hide()" [disabled]='!EditOfficeForm.valid'>Submit</button>

                    <br>

                </div>

            </form>
        </div>
    </div>
</div>

我的组件文件

export class OfficeComponent {

    @Output() public rowEdited: EventEmitter<any> = new EventEmitter();
    public editingData:EditingRowData;

    EditOfficeForm: FormGroup;
    officename: FormControl;
    dept:FormControl;

    constructor(private fb: FormBuilder, public http: Http, private dataService: DataService) {

        this.EditOfficeForm= fb.group({
            officename: this.officename,
            dept:this.dept
        })

    }

    ngOnInit() {
        this.getAllOffice();
    }

    getAllOffice()
    {
        /// getting all officefrom service
    }

    editOffices(rowDetails:any): void
    {
        this.rowEdited.emit({rowDetails});
        console.log('row details', { rowDetails });

        //SEND THIS VALUE TO POPUP DIALOG  

        this.editingData = rowDetails
        // this.editingData contain ALL THE SELECTED OFFICENAME AND DEPT DETAILS. 
        // SO I WANT TO DISPLAY THIS DATA IN MY MODAL DIALOG HTML.


    }

    updateOffice(value: Object): void {
        //updating and passed to database
    } 
}

我一直未定义 officename，我尝试使用editingData?officename它，它开始显示在我的模式对话框中。但是，假设用户只编辑 officename 并保留 dept 作为原始数据，那么它捕获的值是{officename:"newOfficename", dept:null}。

因此，我希望正确编辑和保存详细信息。

如果用户只编辑一个（办公室名称/部门），则只应更改该一个，而其余数据保持不变。