Ng2-smart-table : Use drop-downs or date pickers in inline editing

问题

I was searching for a better table representation for Angular2 and found ng2-smart-table is good to use. But the problem is it doesn't seems to provide a direct way to use drop downs or date pickers in in-line editing.

Is there any way to make it possible or what alternative components I can have to represent a table view in my Angular2 app.

回答1:

I found something like this for drop-downs:

private settings = {
  columns: {
    name: {
      title: 'Name'
    },
    valid: {
      title: 'Valid',
      type: 'html',
      editor: {
        type: 'list',
        config: {
          list: [
            {value: true, title: 'Valid'},
            {value: false, title: 'Not valid'}
          ],
        },
      }
    }, //... more columns
  }
}

回答2:

For datepicker:

In settings[.ts]

settings={
columns:{
// other columns here

dob: {//date of birth
        title: 'yyyy/mm/dd hh:mm',
        type: 'html',
        editor: {
          type: 'custom',
          component: DoBComponent,
        },
   }
}

In dob.component.html

<owl-date-time autoClose [(ngModel)]="datevalue" dataType="string" 
 (click)="updateValue()">
</owl-date-time>

In dob.component.ts

datevalue: any;
  updateValue(){
    console.log(this.datevalue);
    this.cell.newValue = this.datevalue;
  }
where your DoBComponent extends DefaultEditor

In your module.ts

     declarations:[
//other compnents here
        DoBComponent
     ]
     entryComponents: [
      DoBComponent
    ]

hope this helps !!!

Ref: https://www.npmjs.com/package/ng-pick-datetime, https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

回答3:

I had three issues, when I used the soultion of @ampati-hareesh.

"No value accessor for form control with unspecified name attribute". Adding ngDefaultControl to owl-date-time solves it.
"Cannot read property 'isInSingleMode' of undefined". Adding "input" tag solved it.
Value is not assigned. Changing the event from "clicked" to "afterPickerClosed" solved it.

My final dob.component.html looked like;

    <input placeholder=""
                        [(ngModel)]="dateValue"
                        [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1">
    <owl-date-time [pickerType]="'calendar'" autoClose [(ngModel)]="dateValue" 
         ngDefaultControl dataType="string" 
         (afterPickerClosed)="updateValue()" #dt1>
    </owl-date-time>

来源：https://stackoverflow.com/questions/41427742/ng2-smart-table-use-drop-downs-or-date-pickers-in-inline-editing

标签

angular

ng2-smart-table