Comment afficher/masquer la colonne datatable primeng basée sur la sélection de la carte md dans l'application angulaire 2

Question

J'ai 2 md-card: controller et Scheduler. Au clic de la carte contrôleur, je dois montrer la colonne controllerAssignedDate et la colonne hide schedulerAssignedDate et cliquer sur la carte Scheduler. Je dois montrer la colonne schedulerAssignedDate et cacher la colonne controllerAssignedDate. Comment puis-je faire dans l'application 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

dans votre contrôleur, vous créez une variable booléenne isController

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

dans votre modèle, vous pouvez utiliser la colonne propriété [caché]

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