PrimeNg数据表不刷新

5 回答

• 9

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

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

  回复于 2024-04-26T06:50:18+08:00
• 1

  Update ：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（） .

  ---

  Original Answer ：我有一个类似的问题，我用一种稍微不同的方法解决了这个问题 . 如果您使用相同的服务来上传和检索文件，则可以使用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）告诉您：

  “例如，在删除项目时使用切片而不是拼接，或者在添加项目时使用扩展操作符而不是push方法 . ”

  我不确定他们为什么要求你这样做，因为它与官方的Angular文档告诉你要做的相反，但我认为它与为什么[value]绑定无法正常工作有关 .

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

  回复于 2024-04-26T06:50:18+08:00
• 0

  UPDATE ：我更好地了解了the documentation的p-dataTable，特别是 Headers 为变化检测的部分 . 我删除了 p-dataTable 标签中的 [immutable]=false 属性，而我现在通过在修改底层数组时返回类似的东西来刷新表：

  return myOriginalArray.slice();

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

  [immutable]=false

  我正在使用PrimeNG ^ 4.1.3

  回复于 2024-04-26T06:50:18+08:00
• 5

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

  
  ```java
  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;
      }
  }
  

  回复于 2024-04-26T06:50:18+08:00
• 13

  我们可以标记视图以进行检查和呼叫检测 .

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

  回复于 2024-04-26T06:50:18+08:00