PrimeNG удалить строку данных

У меня проблема с удалением строки из p-datatable.

TS

public files: UploadFile[] = [];
deleteAttachement(index) {

    if (this.files.length > 0) {
        for(let file2 of this.files) {
            if (file2.fileEntry.isFile) {
                const fileEntry = file2.fileEntry as FileSystemFileEntry;
                fileEntry.file((file: File) => {
                    console.log("-------------");
                    console.log("File: "+file.name);
                });
            }
        }

        this.files.splice(index, 1);

        for(let file2 of this.files) {
            if (file2.fileEntry.isFile) {
                const fileEntry = file2.fileEntry as FileSystemFileEntry;
                fileEntry.file((file: File) => {
                    console.log("_______________");
                    console.log("File: "+file.name);
                });
            }
        }
    }

}

HTML

<p-dataTable [value]="files" *ngIf="files.length > 0">
<p-column>
  <ng-template let-index="rowIndex" pTemplate type="body">
    <p-button (onClick)="deleteAttachement(index)" icon="fa fa-fw fa-close"></p-button>
  </ng-template>
</p-column>
</p-dataTable>

Мой код регистрирует правильные вещи. Вроде склеиваю правильно. НО, когда я хочу обновить данные в представлении, измените строку:

this.files = this.files.splice(index, 1);

Но теперь он неправильно сращивает и не удаляет правильный ряд. Иногда он удаляет несколько строк, а иногда ничего не удаляет.


person Anton Styopin    schedule 20.04.2018    source источник
comment
Какова цель этой строки: this.files = this.files.splice(index, 1);? Где это находится?   -  person Bharat Gupta    schedule 20.04.2018
comment
Я хочу ОБНОВИТЬ свое мнение. Когда я просто соединяю свой массив, представление не обновляется. Я читал, что если вы назначите свой массив (который привязан к таблице данных) новому объединенному массиву, представление обновится. И так оно и есть, НО соединяет неправильно. Если у вас есть другой вариант обновления вида, подскажите пожалуйста.   -  person Anton Styopin    schedule 20.04.2018


Ответы (3)


Первое, что вам нужно знать, это то, что для любых обновлений, которые вы хотели бы видеть в своем p-dataTable, должен быть совершенно новый объект массива, который должен быть передан в его параметр [value], чтобы p-dataTable знал, что ему нужно повторно отрисовать таблицу. . Таким образом мы сохраняем неизменность объектов, и это имеет очень хорошие последствия для производительности. Проверьте это, чтобы узнать больше о неизменяемости.

splice обновляет тот же массив и, таким образом, не создает новый объект массива. См. splice подробности здесь.

Когда вы выполняете this.files.splice(index, 1), он обновляет массив файлов, но this.files относится к тому же объекту и, следовательно, PrimeNg не обнаруживает его.

Вам нужно будет создавать новый объект массива каждый раз, когда вы хотите удалить из него элемент. Это должно работать:

this.files = this.files.slice(0, index).concat( this.files.slice(index+1) );

slice не обновляет массив (в данном случае this.files), а создает новую копию массива на основе заданных индексов. Итак, здесь, в строке выше, мы создаем два набора массивов. Первый массив находится от начала до заданного index (исключая элемент в index), а второй массив - от заданного index до его конца. Затем мы объединяем оба этих массива, чтобы получить полностью новый массив, исключая элемент в позиции index.

person Bharat Gupta    schedule 20.04.2018
comment
Это именно то, что мне нужно, и это работает, но я этого не понимаю. Спасибо! - person Anton Styopin; 20.04.2018
comment
Я обновил ответ. Дайте мне знать, если вам понадобится дальнейшее понимание. - person Bharat Gupta; 20.04.2018

this.files = this.files.filter((val,i) => i!=index);

Ссылка: https://www.primefaces.org/primeng-4.3.0/#/datatable/crud

person Haseena P A    schedule 17.09.2018

вы должны посмотреть на неизменяемое свойство PrimeNG Datatable.

person fedemiliano    schedule 20.04.2018