在Angular 2应用程序中显示/隐藏基于md-card选择的primeng数据表列,可以通过以下步骤实现:
<md-card>
<md-card-header>
<h2>列选择器</h2>
</md-card-header>
<md-card-content>
<p-dataTable [value]="data">
<!-- 列选择器 -->
<ng-template pTemplate="header">
<tr>
<th>
<p-checkbox [(ngModel)]="showColumn1"></p-checkbox>
列1
</th>
<th>
<p-checkbox [(ngModel)]="showColumn2"></p-checkbox>
列2
</th>
<th>
<p-checkbox [(ngModel)]="showColumn3"></p-checkbox>
列3
</th>
</tr>
</ng-template>
<!-- 列内容 -->
<ng-template pTemplate="body" let-rowData>
<tr>
<td *ngIf="showColumn1">{{ rowData.column1 }}</td>
<td *ngIf="showColumn2">{{ rowData.column2 }}</td>
<td *ngIf="showColumn3">{{ rowData.column3 }}</td>
</tr>
</ng-template>
</p-dataTable>
</md-card-content>
</md-card>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
data: any[] = [
{ column1: '数据1', column2: '数据2', column3: '数据3' },
{ column1: '数据4', column2: '数据5', column3: '数据6' },
{ column1: '数据7', column2: '数据8', column3: '数据9' }
];
showColumn1: boolean = true;
showColumn2: boolean = true;
showColumn3: boolean = true;
}
这样,当用户选择或取消选择列选择器中的复选框时,相应的列将显示或隐藏。
注意:在这个答案中,没有提及任何特定的腾讯云产品或链接,因为这个问题与云计算品牌商无关。
领取专属 10元无门槛券
手把手带您无忧上云