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知道它需要重新呈现表。这样我们就可以保留对象的不变性，并且它具有非常好的性能影响。 Check this了解有关不变性的更多信息。

splice更新相同的数组，因此不会创建新的数组对象。请参阅splice详细信息here。

执行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位置的项目。

Answer 2

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

参考链接：https://www.primefaces.org/primeng-4.3.0/#/datatable/crud

Answer 3

你应该看看PrimeNG Datatable的不可变属性。

PrimeNG删除数据表行

3 个答案: