PrimeNG 删除数据表的一行

Question

我在从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);

但现在它拼接错了，它没有删除正确的行。有时它会删除多行，有时它什么也不删除。

Answer 1

您需要知道的第一件事是，对于您希望在其中看到的任何更新，必须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。