如何編輯ngxdatatable使用模式對話框角2

我想做

我的辦公室名稱和部門的名單在我ngxdatatable什麼。每一個officename，我都有編輯和刪除按鈕，哪位用戶可以編輯和刪除officename/dept。
編輯部分，我想要模式對話框彈出當用戶點擊編輯功能，顯示officieame和部門詳細信息。用戶可以編輯officename和/ dept進行保存。

我所取得的成就

我管理，當用戶點擊編輯功能
不知何故，我有問題，彈出模態對話框中原來的值傳遞到編輯模式dialog

我的問題

我想通過我的原值模態對話框（它的工作）
，並允許用戶編輯officename /部門並保存editied詳細

我的代碼，這是我的模態對話框

<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並將該部分作爲原始數據，則其捕獲的值爲{officename:"newOfficename", dept:null}

所以我希望細節能夠正確編輯和保存。
如果用戶編輯只有一個（officename /部門），那麼其他的數據應該仍然保持
原始數據和當選擇編輯你可能要修補EditOfficeForm formGroup與editingData一排保存它

來源

2017-04-15 user3431310

。類似的東西：

this.EditOfficeForm.patchValue(this.editingData);

來源

2017-04-15 17:07:34

嗨朱莉婭，你是正確的，但我需要補丁值一個接一個。你的答案確實給了我一個主意。 Tq so much – user3431310

this.EditOfficeForm.controls ['officename']。patchValue（this.editingData.officename）; – user3431310

如何編輯ngxdatatable使用模式對話框角2

回答

相關問題