如何使用模态对话框Angular 2编辑ngxdatatable(How to edit ngxdatatable using modal dialog Angular 2)

 
 
 
 我想做的事 
 
 
 我的ngxdatatable中有一个办公室名称和部门列表。 每一个officename，我都有编辑和删除按钮 ，用户可以编辑和删除officename / dept。 
 编辑部分，我想要在用户单击编辑功能时弹出模态对话框 ，并显示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
    } 
     }
 
 我一直都没有定义主题 。 我尝试做这个editingData?officename ，它开始显示在我的模态对话框中。 但是，假设用户只编辑主管名称并将部门保留为原始数据，则其捕获的值为{officename:"newOfficename", dept:null} 
 
 所以我想要正确编辑和保存细节。 
 如果用户只编辑一个（officename / dept），那么其他数据仍应保留 
 原始数据并保存 


 
 
 
What I want to do
 
I have a list of office names and dept in my ngxdatatable. Each officename has an edit and delete button, which a user can use to edit and delete the officename/dept.
 
For the edit part, I want a modal dialog to pop whenever the edit button is clicked (linked to an edit function), and show the officename and dept details. and User can edit the officename and/dept save it.
 
 
What I have achieved
 
I managed to have the modal dialog pop when a user clicks the edit button. Somehow, I have a problem when passing the original value to the edit modal dialog.
 
 
My problem
 
I want to pass my original value to modal dialog (working on it) and allow the user to edit the officename/dept and save the edited detail.
 
 
My Code, this is my modal dialog
 
<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>
 
my component file
 
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
    } 
}
 
I keep getting officename undefined and I tried using editingData?officename and it started to display in my modal dialog. But, let's say the user only edits the officename and leaves the dept as the original data, then the value it captured is {officename:"newOfficename", dept:null}.
 
So I want the details to be properly edited and saved.
 
If the user edit only one (officename/dept) only that one should be changed while the remaining data remains untouched.

原文：https://stackoverflow.com/questions/43427113