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被更新，但表不刷新。

來源

2017-03-03 Paul Meems

因爲在這裏沒有迴應，我也報這是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; 
    } 
}

```

來源

2017-03-09 17:56:27

感謝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

來源

2017-03-11 03:49:07 rbj325

感謝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();** 
});

來源

2017-05-16 10:03:45

對於任何人還在尋找添加記錄綁定到一個primeng表

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

來源

2017-07-06 20:40:36 karthiks3000

謝謝！但是它仍然讓我感覺到，記錄被改變的決定是否決定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

來源

2017-10-26 18:25:49 twosouth

PrimeNg數據表不刷新

回答

相關問題