默认 DataTable PrimeNG - 列切换器

Question

我有一个包含 11 列的数据表。我正在使用可切换列功能。我想显示 11 列选择选项，但最初想显示 4 个选择。我研究了 MultiSelect 组件的几个选项，但没有找到问题的答案

打字稿：

this.columnOptions = [];

    for(let i = 0; i < this.cols.length; i++) {
     if(!(this.cols.header === this.fields.BULKACTIONS.header || this.cols.header === this.fields.TASKID.header || this.cols.header === this.fields.ACTIONS.header)){
      this.columnOptions.push({label: this.cols.header, value: this.cols});
     }
    }

HTML:

<p-header>
  <div style="text-align:left">
    <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
  </div>
 </p-header>

Answer 1

如果我很了解你的需要，你可以做的是 slice 你的 cols 数组在填充 columnOptions 数组后：

    this.columnOptions = [];
    for (let i = 0; i < this.cols.length; i++) {
      this.columnOptions.push({ label: this.cols[i].header, value: this.cols[i] });
    }

    this.cols = this.cols.slice(0, 4);

见StackBlitz

默认 DataTable PrimeNG - 列切换器

Default DataTable PrimeNG - Column Toggler

primeng

angular

primeng-datatable