ng2-smart-table не связывается после удаления

Я пытаюсь использовать ng2-smart-table для отображения данных и встроенного редактирования. Однако похоже, что с этим компонентом что-то не так. Я клонировал репо и запустил несколько тестов локально. Я получил базовый пример демонстрации и добавил объект входных данных, чтобы увидеть изменения / привязку в объекте:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
<pre>{{data | json}}</pre>

Когда я «добавляю новую» строку, она показывает новую запись в массиве объектов, как и ожидалось. Редактирование любой строки тоже работает, правильно обновляя строку. Однако, когда вы удаляете строку, объект не изменяется и продолжает показывать удаленную строку в массиве объектов, но не в сетке. Когда я пытаюсь добавить еще одну строку, она показывает новую строку в сетке, но не обновляет / не привязывает новое значение в массиве объектов. Обновление по-прежнему работает должным образом.

Я размещаю этот вопрос в github ng2-smart-table и не получил там ответа, поэтому надеюсь, что смогу получить его здесь.

Так это настоящая ошибка? Вот Plunker с моими тестами.

Спасибо всем.


javascript angular ng2-smart-table
person UncleFester    schedule 23.08.2017    source источник
comment
Вы нашли какое-нибудь решение?   -  person Roshan Perera    schedule 08.11.2017
comment
К сожалению, я не нашел решения и не получил ответа на вопрос, который я разместил в github. Поэтому я отказался от сетки и начал использовать обычную сетку :(   -  person UncleFester    schedule 09.11.2017
comment
Я протестировал это мое приложение angular 4 и оно работает нормально. Скоро пришлю рабочее решение :)   -  person Roshan Perera    schedule 11.11.2017

Ответы (4)


arrow_upward
4
arrow_downward

Вам необходимо обновить локальный источник данных, который вы передали в таблицу.

Вот как я это сделал.

HTML

<ng2-smart-table 
    [settings]="itemTableSettings"
    [source]="itemSource" 
    (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>

Машинописный код

import {LocalDataSource} from 'ng2-smart-table';

items: Item[];
itemSource: LocalDataSource;

itemTableSettings = {
    delete: {
      confirmDelete: true
    },
    columns: {...}
}

constructor() {}

ngOnInit() {
    this.itemSource = new LocalDataSource(this.items);
}

onDeleteConfirm(event) {

    // Delete item from array
    let index = this.items.indexOf(event.data);
    console.log(index);
    this.items.splice(index, 1);

    // Update the array in the service class


    // Update the local datasource
    this.itemSource = new LocalDataSource(this.items);
}

Работал у меня.

person Priyabrata Pati    schedule 22.03.2018
comment
Если вы извлекаете массив из класса обслуживания, вам также необходимо обновить его, а затем перейти к обновлению источника данных. - person Priyabrata Pati; 22.03.2018

arrow_upward
1
arrow_downward

Вот вам более простое решение:

 onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      const index = event.source.data.indexOf(event.data);
      event.source.data.splice(index, 1);
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }
person Charles Nehez    schedule 09.05.2018
comment
Привет, ваше решение не работает. После этого действия удаления действия добавления и редактирования больше не работают. Решение Приябрата Пати отлично работает даже после удаления действия. - person Frank; 03.12.2019
comment
Я предпочитаю ваше решение, поскольку оно намного проще, поэтому я нашел способ его исправить. Я просто добавляю одну строку после метода resolve (), чтобы обновить источник данных: this.data = [...this.data]; - person Frank; 03.12.2019

arrow_upward
0
arrow_downward

Добавлено несколько строк кода в предоставленный код plnkr

Вот рабочий Plunker: https://plnkr.co/edit/UW9s11xhi5wJgt0nLzXj?p / а>

В шаблоне

<ng2-smart-table [settings]="tableSettings" [source]="data"
(deleteConfirm)="modifyData($event)"
(createConfirm)="addData($event)"
></ng2-smart-table>
    <pre>{{data | json}}</pre>

В app.ts

delflag=false;
  addData(event){
    if(this.delflag){
      this.data.push(event.newData);
    }
    // console.log(event);
    event.confirm.resolve(event.newData);
  }
  modifyData(event){
    this.delflag=true;
    // console.log(this.data);
    let delrow=Object.keys(event.data);
    for(var j in this.data)
    {
      // console.log(this.data,event.data);
    if(this.data[j]==event.data)
      {
        this.data.splice(j,1);
        // this.data=event.source.data;
      }
    }
    event.confirm.resolve(event.source.data);

    // console.log(this.data)
    if(this.data.length==0)
      {this.data=[];
        this.delflag=false;
      }
  }

В настройках

tableSettings = {
add:{
     confirmCreate:true
    },
     delete :{
       confirmDelete: true
     },
//other fields
}

Надеюсь это поможет !!!

person Ampati Hareesh    schedule 24.12.2017

arrow_upward
0
arrow_downward

Assome data - это ваш источник данных таблицы, поэтому у вас есть:

onDeleteConfirm(event): void {
  if (window.confirm('Are you sure you want to delete?')) {
   this.data.remove(event.data)
  } else {

  }
}

person MHS    schedule 08.10.2019