2

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.

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Anton Styopin
  • 753
  • 4
  • 17
  • 35
  • What is the purpose of this line: `this.files = this.files.splice(index, 1);`? Where is it? – Bharat Gupta Apr 20 '18 at 07:41
  • 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 Apr 20 '18 at 07:50

4 Answers4

7

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.

Bharat Gupta
  • 2,628
  • 1
  • 19
  • 27
  • This is exactly what i need and it works, but i don't really understand it. Thanks! – Anton Styopin Apr 20 '18 at 08:53
  • I have updated the answer. Let me know if you would need further understanding. – Bharat Gupta Apr 20 '18 at 12:25
  • This worked for me on PrimeNG 13.x `p-table` and it makes sense. I was hoping there was a more straightforward way though. `splice` didn't work for me since although it removed the item from the array and the table, the table didn't seem to know that there was one less item (pagination kept showing a second page even though there were no longer any rows on that page). Thanks. – Mycah Jan 25 '22 at 21:18
1

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

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

rudrasiva86
  • 573
  • 7
  • 15
Haseena P A
  • 16,858
  • 4
  • 18
  • 35
0

you should look at immutable property of PrimeNG Datatable.

0

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);
        }
Dobidoo
  • 564
  • 6
  • 21