PrimeNG delete row of datatable

0
votes

I have a problem deleting a row from a 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>

My code is logging the right things. It seems I am splicing right. BUT when I want to update the datatable in the view a change the line :

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

But now it splices wrong and it doesn't remove the right row. Sometimes it deletes multiple rows and sometimes it removes nothing.

4
angulartypescriptprimengprimeng-datatable
What is the purpose of this line: this.files = this.files.splice(index, 1);? Where is it? – Bharat Gupta
I want to UPDATE my view. When i just splice my array the view does not update. I have read that if you assign your array (which is bind to the datatable) to the new spliced array, the view will update. And it does, BUT it splices wrong. If you have another option to update the view, tell me please. – Anton Styopin

4 Answers

5
votes

First thing you need to know is that for any updates that you would want to see in your p-dataTable there has to be a completely new array object that should be passed to its [value] parameter so that p-dataTable knows that it needs to re-render the table. This way we preserve immutability of objects and it has very good performance implications. Check this to know more on Immutability.

splice updates the same array and thus doesn't create a new array object. See splice details here.

When you do this.files.splice(index, 1), it updates the files array but this.files refers to the same object and hence it is not detected by PrimeNg.

You would need to create a new array object each time you want to delete an item from it. This should work:

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

slice doesn't update the array (this.files in this case), rather it creates a new copy of an array based on the given indices. So, here in the above line we create two sets of arrays. First array is from start to the given index (excluding the item at index) and the second array is from after the given index to the end of it. And then we concatenate both these arrays to get a completely new array excluding the item at position index.

1
votes

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

Reference Link : https://www.primefaces.org/primeng-4.3.0/#/datatable/crud

0
votes

you should look at immutable property of PrimeNG Datatable.

0
votes

Hi previous code above did not work for me, instead I need to get the row data first and use it as index, splice(index, 1) will work as expected.

const index: number = this.objArr.indexOf(rowData);//get index by passing the concern row data
        if (index !== -1) {
          this.objArr.splice(index, 1);
        }