如何在角度2應用程序中基於md卡選擇顯示/隱藏primeng數據表列

我有2個md卡：控制器和調度程序。在點擊控制器卡時，我必須顯示controllerAssignedDate列並隱藏schedulerAssignedDate列，然後點擊Scheduler卡，我必須顯示schedulerAssignedDate列並隱藏controllerAssignedDate列。我怎樣才能做到這一點在你的控制器angular2應用如何在角度2應用程序中基於md卡選擇顯示/隱藏primeng數據表列

<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>

來源

2017-08-16 Jan69

您創建一個布爾變量isController

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

在你的模板，你可以使用列[隱藏]屬性

<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>

來源

2017-08-16 18:02:34 Kld

如何在角度2應用程序中基於md卡選擇顯示/隱藏primeng數據表列

回答

相關問題