Question

我有2位卡：控制器和调度程序。在单击控制器卡时，我必须显示controllerAssignedDate列并隐藏schedulerAssignedDate列，并且在单击Scheduler卡时，我必须显示schedulerAssignedDate列并隐藏controllerAssignedDate列。我如何在angular2应用程序中执行此操作

 <div><md-card-content><h3>Controller</h3></md-card-content></md-card></div>
 <div><md-card-content><h3>Scheduler</h3></md-card-content></md-card></div>

 <p-dataTable [value]="jobslist" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,30,50]" sortMode="multiple" scrollable="true"   resizableColumns="true" scrollHeight="350px" >

      <p-header>List of Jobs </p-header>

      <p-column field="partNumber" header ="Part Number" [sortable]="true" [filter]="true" ></p-column>
      <p-column field="lineName" header ="Line Name" [sortable]="true" [filter]="true"></p-column>
      <p-column field="jobStatus" header ="Job Status" [sortable]="true" [filter]="true"></p-column>
      <p-column field="owner" header ="Owner" [sortable]="true" [filter]="true"></p-column>
      <p-column field="startDate" header ="Scheduled Start Date" [sortable]="true" [filter]="true"></p-column>
      <p-column field="controllerAssignedDate" header ="Date Assigned to Controller" [sortable]="true" [filter]="true"></p-column>
      <p-column field="schedulerAssignedDate" header ="Date Assigned to Scheduler" [sortable]="true" [filter]="true"></p-column>   
      <p-footer><div class="ui-helper-clearfix" style="width:100%"><a [routerLink]="['/register','']" ><button type="button" pButton icon="fa-plus" style="float:left"  label="Add"></button></a></div></p-footer>

    </p-dataTable>

Answer 1

在控制器中

创建一个布尔变量isController

 isController= true; 
 onToggelController() {
    this.isController= !isController;
 }

在模板中

，您可以使用[hidden]属性列

  <p-column field="controllerAssignedDate" [hidden]="isController" header ="Date Assigned to Controller" [sortable]="true" [filter]="true"></p-column>
  <p-column field="schedulerAssignedDate" [hidden]="!isController" header ="Date Assigned to Scheduler" [sortable]="true" [filter]="true"></p-column>

如何根据角度2应用程序中的md卡选择显示/隐藏primeng数据表列

1 个答案: