如何在动态列的 PrimeNG 数据 table 中隐藏列？

Question

您好，我正在尝试隐藏我的 PrimeNG 数据列-table.Is 有一个属性可以用来关闭 PrimeNG 数据中的列-table。

.Html

<p-dataTable emptyMessage="{{tbldatamsg}}" [value]="dataset" scrollable="true" [style]="{'overflow':'hidden!important'}"
    [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue"  [rows]="20" sortMode="multiple" [(selection)]="selectedRow" selectionMode="multiple"
    [resizableColumns]="true" columnResizeMode="expand" [paginator]="true" [globalFilter]="gb" [rowsPerPageOptions]="[10,15,20,25]"
    appendTo="body" #dt>
    <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
    <p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'130px'} "[field]="col.field" [header]="col.header" [sortable]="true"
      [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search" appendTo="body">
      <ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
        <!--    <div [pTooltip]="row[col.field]" [id]="col.field"> -->
        <span *ngIf="col.field==='modified'" (mouseover)="passIndexValue(i) ">
          <a style="color:black;">{{row[col.field]}}</a>
        </span>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog " appendTo="body" icon="fa fa-fw fa-eye" (click)="onRowSelect($event,'View',i)"></p-button>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog" appendTo="body" icon="fa fa-fw fa-edit" (click)="onRowSelect($event,'Edit',i)" ></p-button>
        <p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog " appendTo="body" icon="fa fa-fw fa-trash" (click)="onRowSelect($event,'Delete',i)"></p-button>
        <span *ngIf="col.field==='suggested_Value'">
          <a style="color:black;">{{row[col.field]}}</a>
        </span>
        <!-- set String -->
        <span (mouseover)="hoveredIndex=null" style="text-align:left;" *ngIf="col.datatype!='int' && col.datatype!='float' && col.field!='modified'  && col.field!='suggested_Value'" >
          {{row[col.field]}}
        </span>
        <!-- set int -->
        <span (mouseover)="hoveredIndex=null" style="text-align:right;float: right" *ngIf="col.datatype=='int' || col.datatype=='float' && col.field!='modified'  && col.field!='suggested_Value'" >
          {{row[col.field]}}
        </span>
       </ng-template>
   <!--<ng-template pTemplate="filter" let-colvalue>
              <input *ngIf="col.field==='symbol'" type="text" pInputText  style="width:100%" [(ngModel)]="SymbolFilterValue" (onChange)="ApplySymbolFilter(dt,SymbolFilterValue,col.field,col.filterMatchMode)" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
              <input *ngIf="col.field!='symbol'" type="text" pInputText  style="width:100%" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
      </ng-template> -->
    </p-column>
  </p-dataTable>

Answer 1

您可以使用 hidden 属性取决于 col 对象：

...
<p-column 
    *ngFor="let col of cols;let j=index;" 
    [style]="{'width':'130px'}" 
    [field]="col.field" 
    [header]="col.header" 
    [sortable]="true"
    [hidden]="!col.isVisible" <======== add your condition here
    ...

Answer 2

解决了..

我已经使用 css display:none;

解决了

<p-column *ngFor="let col of cols;let j=index;" 
[style]="{'width':'130px','display': col.display}" <<--add condition
[field]="col.field" 
[header]="col.header"

.ts

getColumns() {
    let ColumnNamePath = './assets/Grid Column Names/Oats-Exception-Summary-Columns.json';
    this.SharedHttpClientService.getJson(ColumnNamePath)
      .subscribe(column => {
        this.columnJson = [];
        for (var i = 0; i < column.length; i++) {

          this.cols[i] =
            { header: column[i].UI_ColumnName, field: column[i].MappingKey, datatype: column[i].DataType, label: column[i].UI_ColumnName, value: column[i].DB_ColumnName ,display: column[i].Display}
        }

      }, error => console.log(error));

}

column.json

[
     {
        "Display": "true",
        "UI_ColumnName": "End Of Record Marker",
        "DB_ColumnName": "END_OF_RECORD_MARKER",
        "DataType": "String",
        "MappingKey": "end_Of_Record_Marker"
    },
    {
        "Display": "true",
        "UI_ColumnName": "MPID",
        "DB_ColumnName": "MPIDS",
        "DataType": "String",
        "MappingKey": "MPID"
    },
    {
        "Display": "true",
        "UI_ColumnName": "Explanation",
        "DB_ColumnName": "Explanation",
        "DataType": "String",
        "MappingKey": "explanation"
    },
    {
        "Display": "true",
        "UI_ColumnName": "Mpid OATS Exc ID",
        "DB_ColumnName": "MPID_OATS_Exc_ID",
        "DataType": "int",
        "MappingKey": "MPID_OATS_Exc_ID"
    },
    {
        "Display": "none",
        "UI_ColumnName": "OMSOrder ID",
        "DB_ColumnName": "OMSOrderID",
        "DataType": "int",
        "MappingKey": "OMSOrderID"
    },
    {
        "Display": "none",
        "UI_ColumnName": "Report Header ID",
        "DB_ColumnName": "Report_Header_ID",
        "DataType": "int",
        "MappingKey": "report_Header_ID"
    }
]

如何在动态列的 PrimeNG 数据 table 中隐藏列？

How to hide column in PrimeNG Data table for dynamic column?

angular

typescript

primeng

primeng-datatable

您好，我正在尝试隐藏我的 PrimeNG 数据列-table.Is 有一个属性可以用来关闭 PrimeNG 数据中的列-table。