PrimeNg数据表不刷新

Question

使用Angular v2.4.8和PrimeNg v1.1.4

我有一个包含两个组件的页面:

1. Dropzone,用于上传文件
2. p-datatable显示上传的文件

我将Dropzone配置为一次发送5个文件,当完成5个文件时,onDropZoneSendingMultiple会引发事件.上传所有文件时onDropZoneQueueComplete.

在两个侦听器中,我想刷新第二个组件中的数据表.这不起作用.我需要刷新页面才能看到新文件.

我的主页HTML:

<div class="row" id="dropzoneContainer">
    <dropzone class="dropzone" #dz [config]="dropZoneConfig" 
              (error)="onDropZoneUploadError($event)"
              (sendingmultiple)="onDropZoneSendingMultiple($event)"
              (queuecomplete)="onDropZoneQueueComplete($event, dz);"
              (maxfilesreached)="onDropZoneMaxfilesReached($event)"
              (maxfilesexceeded)="onDropZoneMaxfilesExceeded"></dropzone>
</div>

<div class="row">
    <div class="col-md-12">
        <FilesList></FilesList>
    </div>
</div>

该Dropzone-component显示悬浮窗.该FilesList说明了DataTable.部分HTML:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" (onRowSelect)="details($event)">

在我的主要ts文件中,我有:

@ViewChild(FilesListComponent)
public filesListComponent: FilesListComponent;

private reloadFileList() {
  this.filesListComponent.reload();
}

在我的文件列表中我有

public files: File[];
public reload() {
    this.getFiles();
}
public getFiles() {
    this.fileService.getAll()
        .then(
        data => {
            this.files = data;
        });
}

getFiles在页面加载时也会调​​用.当我添加console.log()语句时,我可以看到它getFiles()被调用并被this.files更新,但表格不会刷新.

Answer 1

对于仍在寻找将记录添加到绑定到primeng表的数组的新语法的任何人

this.arrayRecords= [...this.arrayRecords, newObject];

Answer 2

更新:PrimeNG最近删除了自动检测更改的DoCheck界面,请参阅:https://www.primefaces.org/primeng-4-0-0-rc4-released/

答案是使用扩展运算符([... arr] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)将项添加到数组而不是.推().

原始答案:我有一个类似的问题,我用一个稍微不同的方法解决了.如果您使用相同的服务来上传和检索文件,则可以使用RxJS而不是跨组件监听事件.

在我的服务上,当我使用POST或PUT时,我想在应用程序中重新加载:

  private _shouldUpdateSource = new BehaviorSubject<boolean>(false);
  shouldUpdateObservable = this._shouldUpdateSource.asObservable();

在你的POST和/或PUT方法中

this.http.post(..).map( res => {this._shouldUpdateSource.next(true);});

这允许您订阅组件中的fileService.shouldUpdateObservable:

 this.shouldUpdateSub = this.fileService.shouldUpdateObservable
  .subscribe((shouldUpdate: boolean) => {
    if (shouldUpdate) {
      this.updateFiles();
    }
  });

这似乎是处理我见过/使用的组件之间的服务通信的最佳方式.

-Edit-这是官方文档中的相同概念:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

-Edit 2-我在更新到4.0.0后再次遇到此问题.FWIW,我最终删除了PrimeNG Datatable,而不是使用手册*ngFor,它工作正常.似乎PrimeNg文档(https://www.primefaces.org/primeng/#/datatable)告诉您:

"例如,在删除项目时使用切片而不是拼接,或者在添加项目时使用扩展操作符而不是推送方法."

我不确定他们为什么要求你这样做,因为它与官方的Angular文档告诉你要做的相反,但我认为它与为什么[value]绑定不能按预期工作有关.

就个人而言,我正在离开PrimeNg,转而使用具有显式refresh()函数的Covalent数据表:https://teradata.github.io/covalent/#/components/data-table

Answer 3

更新:我更好地了解了p-dataTable 的文档,特别是标题为Change Detection的部分.我删除了[immutable]=false在属性变通p-dataTable标签,而是我现在得到表通过返回这样的刷新,当我修改底层数组:

return myOriginalArray.slice();

原文:p-datatable当我从用于填充表格的基础数组中删除项目时,我无法进行更新/刷新.不知道为什么,但为p-datatable标签添加以下属性为我修复了一些东西:

[immutable]=false

我正在使用PrimeNG ^ 4.1.3

Answer 4

我怀疑这与您的子组件处理更改的方式有关。您应该实现 onChange 事件并以这种方式设置文件。这是一个例子：

````

export class FilesListComponent implements OnChanges {
    @Input() files: File[];

    ngOnInit() {
    }

    // Subscribe to the change event and update the model
    ngOnChanges(changes: {[propName: string]: SimpleChange}) {
        let key = 'files';
        this.files = changes[key].currentValue;
    }
}

````