Ng2-smart-table ：在内联编辑中使用下拉菜单或日期选择器

Question

我正在为 Angular2 寻找更好的 table 表示，发现 ng2-smart-table 很好用。但问题是它似乎没有提供在在线编辑中使用下拉菜单或日期选择器的直接方法。

有没有什么方法可以让它成为可能，或者我可以使用哪些替代组件来表示我的 Angular2 应用程序中的 table 视图。

Answer 1

我为下拉菜单找到了类似这样的内容：

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
  }
}

Answer 2

对于日期选择器：

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
    ]

希望这对您有所帮助!!!

参考：https://www.npmjs.com/package/ng-pick-datetime， https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

Answer 3

当我使用 @ampati-hareesh 的灵魂时，我遇到了三个问题。

"No value accessor for form control with unspecified name attribute"。将 ngDefaultControl 添加到 owl-date-time 即可解决。
"Cannot read property 'isInSingleMode' of undefined"。添加 "input" 标签解决了它。
未分配值。将事件从 "clicked" 更改为 "afterPickerClosed" 解决了它。

我的最终 dob.component.html 看起来像；

    <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>

Answer 4

public settings = {
    actions: {
      position: 'right',
      //custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
    },
    columns: {
      ctg_name: {
        title: 'Category',
      },
      ctg_visible: {
        title: 'Visible',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'True'},
              {value: '0', title:'False'}
            ],
          },
        }
      }
    },
  };

Ng2-smart-table ：在内联编辑中使用下拉菜单或日期选择器

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

angular

ng2-smart-table