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

Question

• 我想做的事 我的ngxdatatable中有办公室名称和部门列表。每个officename都有一个编辑和删除按钮，用户可以使用该按钮编辑和删除officename / dept。 对于编辑部分，我想要在单击编辑按钮（链接到编辑功能）时弹出模式对话框，并显示主席名和部门详细信息。用户可以编辑officename和/ 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:"newOfficename", dept:null}。

所以我想要正确编辑和保存细节。

如果用户只编辑一个（officename / dept），则只应更改一个，而其余数据保持不变。

Answer 1

选择行进行编辑时，您可能需要使用editingData修补EditOfficeForm formGroup。像这样的东西：

this.EditOfficeForm.patchValue(this.editingData);

Answer 2

为了显示Modal，您可以在任何地方创建一个简单的按钮：

<button type="button" class="btn btn-primary"  data-target="#editModal" (click)="updateOffice(row)" data-toggle="modal" data-original-title="Edit">
        Edit
</button>

不要忘记在你的按钮中将你的模态和data-target的id设置为模态的id。然后填写表单中的编辑字段，你可以像你这样做updateOffice()：

updateOffice(row: object){
  this.EditOfficeForm.setValue({
  officename: row.officename,
  dept: row.dept
});
}