如何在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;
}