ng2-smart-table创建按钮无法正常工作

时间:2016-11-04 20:01:26

标签: angular smart-table

我从firebase获取数据并使用ng2-smart-table显示。

但是,添加数据后,添加对话框不会关闭。它仍然使用添加的值打开。

这是我的代码:

settings = {
    pager:{perPage:50},
    add: {
        addButtonContent: '<i class="ion-ios-plus-outline"></i>',
        createButtonContent: '<i class="ion-checkmark"></i>',
        cancelButtonContent: '<i class="ion-close"></i>',
        confirmCreate: true,
    },

要创建的功能:

onCreateConfirm(event): any {
    //this service is updating the new data to firebase.
    this.service.createData(event.newData);
    //after that the newdata still on edit mode and not closing it...
}

4 个答案:

答案 0 :(得分:2)

  

在模板html中添加

     <ng2-smart-table [settings]="settings" [source]="source" 
(createConfirm)="onCreateConfirm($event)"
(deleteConfirm)="onDeleteConfirm($event)"
(editConfirm)="onSaveConfirm($event)">
     </ng2-smart-table>
  

组件

    settings = {delete: {
      confirmDelete: true
    },
    add: {
      confirmCreate: true
    },
    edit: {
      confirmSave: true
    },
     .......
    }


  source: LocalDataSource;

  constructor() {
    this.source = new LocalDataSource(this.data);
  }

  onDeleteConfirm(event):void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve(); 
    } else {
      event.confirm.reject();
    }
  }

  onSaveConfirm(event):void {
    if (window.confirm('Are you sure you want to save?')) {
      event.newData['name'] += ' + added in code'; 
      event.confirm.resolve(event.newData);
    } else {
      event.confirm.reject();
    }
  }

  onCreateConfirm(event):void { 
      event.confirm.resolve(event.newData);
  }

答案 1 :(得分:1)

您必须在onCreateConfirm(事件)

的末尾添加此行
event.confirm.resolve(event.newData);

答案 2 :(得分:0)

解决方法是使用

this.source = new LocalDataSource();
const data = this.service.getData();
this.source.load(data);

答案 3 :(得分:0)

最后,我通过尝试多次获得了解决方案,并且这段代码对我有用

首先,您使用Firebase或angularfire2读取一次数据

  this.user.take(1).subscribe(response => {
  response.forEach(item=>{
    this.data.push({
      id:this.i++,
      firstName: item.subs_name, 
      lastName: item.subs_info, 
      email: item.subs_price, 
      username: item.subs_storage
    });
  })
  this.source.load(this.data);
});

第二,您使用onSaveConfirm方法更新数据

onSaveConfirm(event): void  {
 if (window.confirm('Are you sure you want to make a changes?')) {
  event.confirm.resolve();
  this.database.object(`subscription/${event.newData.id}`).update({
    subs_name: event.newData.firstName, 
    subs_info: event.newData.lastName, 
    subs_price: event.newData.email, 
    subs_storage: event.newData.username
   })
  } else {
   event.confirm.reject();
  }
}

这样在系统中这样做会向您显示虚拟数据,而如果您进行更改,它将保存在您的Firebase中

这对我来说很有效,我希望它也对您有用