PrimeNg数据表不刷新

问题描述：

采用了棱角分明v2.4.8和PrimeNg V1.1.4PrimeNg数据表不刷新

我有两个组成部分的页面：

悬浮窗，文件上传
对数据表显示上传的文件

我配置了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显示数据表。在HTML的部分：

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

我主要的TS文件我有：

@ViewChild(FilesListComponent) 
public filesListComponent: FilesListComponent; 

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

在我的文件清单：TS我有

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

getFiles也被称为在页面加载。当我添加console.log()陈述我可以看到getFiles()被调用和this.files被更新，但表不刷新。

因为在这里没有回应，我也报这是https：// github上的错误。com/primefaces/primeng/issues/2219 –

请添加运动员 – yurzui

答

我怀疑这与您的子组件处理更改的方式有关。您应该实现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; 
    } 
}

```

感谢Boyan的回复。我无法让它工作。不知何故'ngOnChanges'永远不会被调用。我通过“@ angular/core”更新了我的导入：'import {Component，OnInit，OnDestroy，OnChanges，SimpleChange，Input};' –

Paul，只需将文件结果数组分配给输入文件即可触发更改检测。 “ –

你的意思是我在我的'getFiles（）'中做了什么？我分配'this.files = data;'或者我需要将它分配到别的地方吗？ –

答

更新：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）将项目添加到您的数组而不是.push（）。

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

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

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

在您的文章和/或put方法

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

，它允许你订阅您的组件中的fileService.shouldUpdateObservable：

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

这似乎是bes处理关于我见过/使用的组件之间的服务的通信的方式。

CNC中下面是官方文档中的同一个概念：
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

- 编辑2- 我就遇到了这个问题，更新到4.0.0后再次。 FWIW，我最终删除了PrimeNG Datatable，而不是使用手动* ngFor，它工作正常。看起来PrimeNg文档（https://www.primefaces.org/primeng/#/datatable）告诉您：

“例如，在删除项目时使用slice而不是拼接，或者在添加项目时使用spread运算符而不是push方法。

我不确定他们为什么要求你这么做，因为它违背了官方的Angular文档告诉你要做的事情，但我相信它与为什么[value]绑定不能正常工作有关期望。

个人而言，我正在从PrimeNg远赞成其具有明确的刷新（共价数据表）功能：https://teradata.github.io/covalent/#/components/data-table

感谢rbh325的回复。看来我可以听到shouldUpdate事件，但仍然没有刷新我的表。事实上，这个事件被称为很多次，它冻结了我的页面。我试图创建一个plunker页面：https://plnkr.co/edit/PdlI6Ay9KIETTcI1Y6VJ但我也是新来的笨蛋，不能让它工作，但希望你能看到我做错了什么。 –

_shouldUpdateSource应该在file-service.ts中。我在plunkr中看不到那个文件。您遇到的所有问题都是跨组件通信。这里的想法是将其转移到服务中并从组件中移出。你不能在组件中模拟你的服务调用，它不会以相同的方式处理。 – rbj325

'答案是使用扩展运算符（[..arr]）将项添加到您的数组而不是.push（）。“这是什么意思？什么是语法使用？ –

答

我们可以标记检查的观点，并呼吁detechchange。

@ViewChild('searchDt') searchTable: DataTable; 


self.dealService.getAccounts(self.searchParams).subscribe((response) => {  
    Deal.setAvailableAccount(response.map((current) => { 
    return { 
     "cifNumber": current['cif'], 
     "ucic": current['ucic'], 
     "accountNomenclature": current['customerName'], 
    } 
    })); 

    **self.searchTable.changeDetector.markForCheck(); 
    self.searchTable.changeDetector.detectChanges();** 
});

答

对于任何人还在寻找添加记录绑定到一个primeng表

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

谢谢！但是它仍然让我感觉到，记录被改变的决定是否决定PrimeNG的表是否更新......如果元素被推入，表不会更新，并且如果元素是使用扩展运算符插入的， ..为什么？ –

我同意，当我从角度2升级到角度4时，我必须更改所有代码，而这种方法看起来不正确。 – karthiks3000

@JeremyThille不同之处在于Angular的浅层变化检测。如果使用myArray.push（elem），指向数组的指针不会更改，并且Angular不会注意到更改。通过使用myArray = [... myArray，elem]你实例化一个新的数组，所以指针被更新，而且Angular会注意到这个改变。尽管扩展算子解决方案的性能比push（）低一点，但只有Angular做浅度变化检测比深度变化检测更具性能* LOT *性能。 – HammerNL

答

UPDATE数组的新语法：我参加了一个更好的看the documentation为p-dataTable，特别是标题为变更检测的部分。我在p-dataTable标签去除[immutable]=false属性的变通，而是我现在得到表通过返回这样的刷新，当我修改底层数组：

return myOriginalArray.slice();

ORIGINAL：我当我从用于填充表格的底层数组中移除一个项目时，无法使p-datatable更新/刷新。没有线索，为什么，但添加下面的属性到p-datatable标签固定的东西对我来说：

[immutable]=false

我使用PrimeNG^4.1.3

PrimeNg数据表不刷新

相关推荐