I am using ng2 smart table library ad when i clicked on edit than one column is editable rest column is not editable. before click on the edit button data is displayed in the all columns but after click on that some column fields are empty. How can I resolve this issue in ng2 smart table. I am sharing my angular code.

[SDE-Manvendra]

here is my .ts component file code :

initDatesForm(){ this.today = new Date();

this.betweenDatesForm = new FormGroup({
    fromDate : new FormControl('',[]),
    projectId : new FormControl('',[]),
    role : new FormControl('',[])
});

}

public calendarApplied(event:any) {

// if leader then he can select more than one user's and also other user's // if selected user value if(this.userRole === CONSTANTS.ROLE_ADMIN){ let dateMap = {"fromDate":event.picker.startDate._d, "toDate":event.picker.endDate._d, "projectId":this.selectedProject, "role": this.userRole} this.taskService.getDSRDetails(dateMap).subscribe((results) =>{ this.dsrReportDetails = results.data; const dsrChildData = this.dsrReportDetails.flatMap(( item: { userWiseDSRDtos: any[]; } ) => item.userWiseDSRDtos.flatMap(user => user.userDSRChildDtos)); console.log(dsrChildData); this.source = new LocalDataSource(dsrChildData); }) }else{ let dateMap = {"fromDate":event.picker.startDate._d, "toDate":event.picker.endDate._d, "projectId":this.selectedProject, "role": this.selectedProjectData} this.taskService.getDSRDetails(dateMap).subscribe((results) =>{ this.dsrReportDetails = results.data; const dsrChildData = this.dsrReportDetails.flatMap(( item: { userWiseDSRDtos: any[]; } ) => item.userWiseDSRDtos.flatMap(user => user.userDSRChildDtos)); console.log(dsrChildData); this.source = new LocalDataSource(dsrChildData); }) }

}

settings = {
columns: {

  dateTime: {
    title: 'Date', filter: false,
    valuePrepareFunction: (dateTime: Date) => {
      return this.datePipe.transform(new Date(dateTime), 'dd-MM-yyyy');
    }, editable: false
  },

  userName: {
    title: 'Full Name', filter: false, editable: false
  },

  startTime: {
    title: 'Start Time', filter: false, 
    valuePrepareFunction: (startTime: Date) => {
      return this.datePipe.transform(new Date(startTime), 'h:mm:ss a');
    }, editable: false
  },

  stopTime: {
    title: 'End Time', filter: false,
    valuePrepareFunction: (stopTime: Date) => {
      return this.datePipe.transform(new Date(stopTime), 'h:mm:ss');
    }, editable: false
  },

  breakHours: {
    title: 'Break Time', filter: false, editable: false
  },

  workingHours: {
    title: 'Working Hours', filter: false, editable: false
  },

  expectedHours: {
    title: 'Total Hours', filter: false,
    valuePrepareFunction: (expectedHours: Date) => {
      return this.datePipe.transform(new Date(expectedHours), 'h:mm:ss');
    }, editable: false
  },

  comment: {
    title: 'Description',
    type: 'type', filter: false
  },
},
pager: {
  display: true,
  perPage: 1,
},
attr: {
  class: 'table table-sm unstripped-table',
},
actions: {
  edit: true,
  delete: false,
  add: false,
  position: 'right'
}

};

here is my html component code