Ng2-smart-table привязывает событие кнопки "Добавить новый" к внешней кнопке

Question

Я использую плагин ng2-smart-table для таблицы. Есть Add new кнопка, чтобы добавить запись в таблицу.

Но я просто хочу вызвать 'Add new' событие от внешней кнопки (может быть верхней частью таблицы, но не внутри таблицы). В ng2-smart-таблице уже есть функция, полностью противоположная моим требованиям. Это может быть достигнуто с помощью 'mode:external'

В настоящее время это открыто с их страницей Github как проблема.

Если у них нет опции с Ng2-smart-таблицей. Есть ли способ привязать событие к другим кнопкам (внешним) в Angular 6? Если да, пожалуйста, дайте мне, как это сделать в Angular 6.

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете вызвать событие создания ng2-smart-таблицы через событие объекта DOM.

Допустим, настройки кнопки добавления моей ng2-smart-таблицы

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-таблице, как

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

Answer 2

Вам необходимо использовать LocalDataSource или ServerDataSource.

У меня был тот же вопрос, и после того, как я попробовал несколько примеров, я увидел хороший здесь. В этой части кода они используют метод источника данных load(data) с источником (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(); }