如何show/hide primeng datatable column based on md-card selection in angular 2 application
How to show/hide primeng datatable column based on md-card selection in angular 2 application
我有 2 张 md 卡:控制器和调度程序。单击控制器卡时,我必须显示 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>
在您的控制器中创建一个布尔变量 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>
我有 2 张 md 卡:控制器和调度程序。单击控制器卡时,我必须显示 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>
在您的控制器中创建一个布尔变量 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>