默认 DataTable PrimeNG - 列切换器答案

【问题标题】：Default DataTable PrimeNG - Column Toggler默认 DataTable PrimeNG - 列切换器
【发布时间】：2018-10-19 12:35:00
【问题描述】：

我有一个包含 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>

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

如果我充分了解您的需求，您可以在填充 columnOptions 数组后将 slice cols 数组：

    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

【讨论】：