PrimeNg datatable不刷新 [英] PrimeNg datatable doesn't refresh

问题描述

使用Angular v2.4.8和PrimeNg v1.1.4

Using Angular v2.4.8 and PrimeNg v1.1.4

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

I have a page with two components:

1. Dropzone，用于上传文件


2. p-datatable显示上传的文件

我配置Dropzone一次发送5个文件，当完成5个文件时，会引发事件 onDropZoneSendingMultiple 。当上传所有文件 onDropZoneQueueComplete 被提出。

I configured Dropzone to send 5 files at a time and when it is finished with 5 files the event onDropZoneSendingMultiple is raised. When all files are uploaded onDropZoneQueueComplete is raised.

在这两个监听器中，我想刷新在第二部分。这不行。我需要刷新页面以查看新文件。

In both listeners I want to refresh the datatable which is in the second component. This is not working. I need to refresh the page to see the new files.

我的主页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显示dropzone。 FilesList 显示数据。
HTML的一部分：

The Dropzone-component shows the dropzone. The FilesList shows the datatable. Part of the HTML:

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

在我的主要ts文件中，我有：

In my main ts-file I have:

@ViewChild(FilesListComponent)
public filesListComponent: FilesListComponent;

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

在我的文件列表中，我有

In my filelist ts I have

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

getFiles 也是在页面加载时调用
当我添加 console.log（）语句我可以看到 getFiles（）被调用和 this.files 已更新，但表不刷新。

getFiles is also called at page load. When I add console.log() statements I can see getFiles() is called and this.files is updated, but the table doesn't refresh.

推荐答案

我有一个类似的问题，我用一个稍微不同的方法解决了。如果您使用相同的服务上传和检索您的文件，您可以使用RxJS，而不是在组件之间侦听事件。

I had a similar issue which I solved using a slightly different approach. If you are using the same service to upload and retrieve your files you can use RxJS instead of listening to events across components.

在我的服务中，我想重新加载应用程序当我做一个POST或PUT我使用：

On my services I want to reload across the app when I make a POST or PUT I use:

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

在您的POST和/或PUT方法中

In your POST and/or PUT methods

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

哪些可以订阅您的组件中的fileService.shouldUpdateObservable：

Which allows you to subscribe to the fileService.shouldUpdateObservable in your components:

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

这似乎是处理有关我看到/使用的组件之间的服务的通信的最佳方式。

This seems to be the best way to handle communication about a service between components I've seen/used.

这篇关于PrimeNg datatable不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！