Question

Stackblitz：https://stackblitz.com/edit/primeng-p-table-multisort

配置：
"@angular/cli": "~7.0.2", "primeng": "7.0.5",

我有一个带有延迟加载的PrimeNG p表。需要向其中添加多列排序。

Stackblitz链接上方的示例代码。

<p-table [columns]="cols" [value]="cars1" [lazy]="true" [lazyLoadOnInit]="false" (onLazyLoad)="loadList($event)" sortMode="multiple" [multiSortMeta]="multiSortMeta">

如果是单一排序模式，则可以正常工作。

获取错误信息ERROR RangeError: Maximum call stack size exceeded。

这应该是一个简单的实现，但无法理解此处缺少的内容，或者PrimeNG不支持此功能。

感谢您的帮助。

Answer 1

此问题是由于this.cdRef.detectChanges();造成的，这就是原因 loadList在HTML中绑定到(onLazyLoad)="loadList($event)"。

每次分页，排序和筛选发生时，PrimeNg都会调用该事件。因此，当我们加载并添加排序事件时，它会不断调用。而且每次也会调用Angular变化检测，从而导致错误ERROR RangeError: Maximum call stack size exceeded

loadList($event: any = {}) {
this.cars1 = [
  {
    vin: "a1653d4d",
    brand: "VW",
    year: 1998,
    color: "White",
    price: 10000
  },
  {
    vin: "ddeb9b10",
    brand: "Mercedes",
    year: 1985,
    color: "Green",
    price: 25000
  }
];
this.cdRef.detectChanges(); // this is the issue

}

已修改

ngOnInit() {
  this.cols = [
  { field: "vin", header: "Vin" },
  { field: "year", header: "Year" },
  { field: "brand", header: "Brand" },
  { field: "color", header: "Color" }
  ];

this.multiSortMeta = [
  { field: "year", order: 1 },
  { field: "brand", order: -1 }
];
 this.loadList();
}

loadList($event: any = {}) {
this.cars1 = [
  {
    vin: "a1653d4d",
    brand: "VW",
    year: 1998,
    color: "White",
    price: 10000
  },
  {
    vin: "ddeb9b10",
    brand: "Mercedes",
    year: 1985,
    color: "Green",
    price: 25000
  }
];
// this.cdRef.detectChanges();
}

最底线是this.cdRef.detectChanges();，如果您正在使用它，则应在应用程序中的任何地方小心谨慎地使用它。

updated stackblitz

Answer 2

更新后的Stackblitz：https://stackblitz.com/edit/primeng-p-table-multisort

它通过原型链覆盖了PrimeNG String itemName = item.getName(); List<ItemA> itemAList = alpha.doX(..., ..., ...) .peek(item -> packagedItems.put(itemName, ...)) .peek(item -> readyItems.put(itemName, ..., ...))) .map(item -> transform(itemName, ...)) .collect(toList());-Table方法。

旧代码：

sortMultiple

新代码：

Table.prototype.sortMultiple = function () {
    var _this = this;
    if (this.multiSortMeta) {
        if (this.lazy) {
            this.onLazyLoad.emit(this.createLazyLoadMetadata());
        }
        else if (this.value) {
            if (this.customSort) {
                this.sortFunction.emit({
                    data: this.value,
                    mode: this.sortMode,
                    multiSortMeta: this.multiSortMeta
                });
            }
            else {
                this.value.sort(function (data1, data2) {
                    return _this.multisortField(data1, data2, _this.multiSortMeta, 0);
                });
            }
            if (this.hasFilter()) {
                this._filter();
            }
        }
        this.onSort.emit({
            multisortmeta: this.multiSortMeta
        });
        this.tableService.onSort(this.multiSortMeta);
    }
};

PrimeNG p表延迟加载和多重排序-进入循环-超出最大调用堆栈大小

2 个答案: