根据列选择，以角度6动态显示和隐藏ngx-datatable列

Question

我正在使用ngx-datatable绑定数据。 我想基于角度6中的选择显示/隐藏列。以下是用于ngx-datatable的代码

<ngx-datatable #item_table class="table-striped" [rows]="rows" [loadingIndicator]="loadingIndicator"
          [columns]="columns" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'auto'"
          [externalPaging]="true" [count]="page.totalElements" [offset]="page.pageNumber" [limit]="page.size">

          <ngx-datatable-column prop="traceEntId" [name]='"Trace Id" | translate' [width]="columnWidth">
            <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
              <a (click)="showItemSummaryModal(value);" [hidden]="showExtId">
                <strong>{{value}}</strong>
              </a>
              <a (click)="showItemSummaryModal(value);" [hidden]="!showExtId">
                <strong>{{row.traceEntExtId}}</strong>
              </a>
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column prop="itemType" [name]='"Item Type"| translate'>
            <ng-template let-value="value" ngx-datatable-cell-template>
              {{value}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column prop="itemId" [name]='"Item ID" | translate'>
            <ng-template let-value="value" ngx-datatable-cell-template>
              {{value}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column prop="itemName" [name]='"Item Name"| translate'>
            <ng-template let-value="value" ngx-datatable-cell-template>
              {{value}}
            </ng-template>
          </ngx-datatable-column>
        

        </ngx-datatable>

Answer 1

你可以在这里查看我的仓库 https://github.com/choudharymahipal/ShowHide_Column

Stackblitz 的实例： https://stackblitz.com/edit/angular-bg5fzt

希望对你有帮助。 :)