angular - 如何以角度隐藏/显示素数ng表中的p列？

Question

我正在使用这样的primeng数据表，我的要求是

1）通过单击编辑按钮可编辑行（仅选定行可编辑）-> 完成

2）所有列都不应该显示，但在编辑模式下它应该显示在该行 -> 未完成

对于上述要求，我做了这样的表格，我的第一个要求解决了，我面临第二个要求的问题

这是代码

这里的生效日期，不应该显示表格，但在编辑时是必填字段

 <form [formGroup]="chargeCodeAddForm">
<p-dataTable [value]="fspChargeCodeList" selectionMode="single" [loading]="loading" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
  scrollable="true" scrollHeight="400px" [paginator]="true" [lazy]="true" [rows]="pageSize" [totalRecords]="totalElements"
  [editable]="true" (onLazyLoad)="getFspChargeCode($event)" [responsive]="true" [globalFilter]="gb">


  <p-column styleClass="col-button">

    <ng-template let-fspChargeCode="rowData" pTemplate="body">
      <span *ngIf="!fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editRow(fspChargeCode)">
          <i class="fas fa-pencil-square-o"></i>
        </a>
      </span>
      <span *ngIf="fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editChargeCode(fspChargeCode)">
          <i class="fas fa-check"></i>
        </a>
      </span>
      <a class="delete-mwa" (click)="delete(fspChargeCode)">
        <i class="far fa-trash-alt"></i>
      </a>

    </ng-template>

  </p-column>

  <p-column field=approvalManager header="{{columns['approvalManager']}}" [hidden]="false" required="true">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.approvalManager}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-autoComplete field="firstName"
              [(ngModel)]="fspChargeCode.approvalManager" formControlName="approvalManager" [suggestions]="employees" (completeMethod)="getEmployee($event)"></p-autoComplete>

              <label *ngIf="fspChargeCode.approvalManager">
                {{columns['approvalManager']}}</label>
              <div *ngIf="formErrors.approvalManager" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.approvalManager}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=startDate header="{{columns['startDate']}}" [hidden]="false" required="false">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.startDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['startDate']}}" formControlName="startDate" name="startDate" [(ngModel)]="fspChargeCode.startDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.startDate">
                {{columns['startDate']}}</label>
              <div *ngIf="formErrors.startDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.startDate}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=endDate header="{{columns['endDate']}}" [hidden]="false" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.endDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['endDate']}}" name="endDate" formControlName="endDate" [(ngModel)]="fspChargeCode.endDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['endDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.endDate}}
              </div>
              <div *ngIf="chargeCodeAddForm.hasError('dates')">
                End date must be after the start date
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>
  <p-column field=effectiveDate header="{{columns['effectiveDate']}}" [hidden]="getEdit(false)" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.effectiveDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['effectiveDate']}}" name="effectiveDate" formControlName="effectiveDate" 
              [(ngModel)]="fspChargeCode.effectiveDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['effectiveDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.effectiveDate}}
              </div>

            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>


</p-dataTable>

请帮我

标签： angularangular5primengprimeng-datatable

Answer 1

在app.module.ts中导入它

 import { MultiSelectModule } from 'primeng/multiselect'; 

“ tableOptions.columnDefination ”包含所有属于网格的列。在selectedColumns列表中，您可以填写您需要显示的所有列

 <p-multiSelect [options]="tableOptions.columnDefination" [(ngModel)]="selectedColumns" optionLabel="header" defaultLabel="Choose Columns">         
 </p-multiSelect>

您选择的任何列都会反映在您的 p 表数据中。