Ng2-smart-table绑定“Add New”按钮事件到外部按钮

Question

我一直在使用ng2-smart-table插件用于表格网格。有一个Add new按钮可以将条目添加到表中。

但我只想从一个外部按钮触发'Add new'事件(可能是表格的顶部，但不是表格的内部)。There is a feature already available in the ng2-smart-table，这与我的要求完全相反。这可以通过使用'mode:external'来实现。

目前，这是一个开放的问题，他们的Github page。

如果他们没有Ng2-smart-table的选项，在Angular 6中有没有绑定事件到其他按钮(外部)的方法？如果是这样，我该怎么做呢？

Answer 1

您可以通过DOM对象事件触发NG2-smart-table的创建事件。

假设我的NG2-smart-table的add按钮设置

add: {
      addButtonContent : '<span class="add"><i class=""></i></span>',
      createButtonContent:'<i class="far fa-save"></i>',
      cancelButtonContent: '<i class="fas fa-times"></i>',
      confirmCreate: true,
    }

然后点击外部按钮触发点击ng2-smart-table中的'add‘按钮，如下所示

onAdd(event) {
    $(".add").click();   
  }

Answer 2

您需要使用LocalDataSource或ServerDataSource。

我也有同样的问题，在尝试了一些例子之后，我看到了一个好的here。在这部分代码中，他们使用data source method load(data) with source(LocalDataSource)：

constructor(protected service: BasicExampleLoadService) {
   this.source = new LocalDataSource();

   this.service.getData().then((data) => {
     this.source.load(data);
   });
}

然后，我尝试使用我的代码，并对LocalDataSource执行了相同的操作，但为了向表中添加一行，我执行了以下操作：

this.source.add({
  name: 'name',
  description: 'desc',
  numQuestions: '8',
});
this.source.refresh();

这对我很管用。我希望它能帮上忙。

Answer 3

试试:在你的html上：

 `<button (click)="addRecord()">Add</button>     <ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>` 

在您的组件上：@ViewChild('smartTable') smartTable; . . . addRecord() { this.smartTable.grid.createFormShown = true; this.smartTable.grid.getNewRow(); }