如何选择要显示哪个表列

Question

我有一个列（表名，姓，出生地，出生日期和三个以上）表。 在表格上方有一个按钮，它打开一个带有列名称复选框的模式。

这是带复选框的代码。

<div *ngFor="let column of columns"> 
     <md-checkbox id="{{column.name}}" 
         [checked]="checked" 
         [(ngModel)]="setColumn" 
         (click)="showColumn($event, column.name)">{{ column.name }}</md-checkbox> 
    </div> 

因此，当选中名和姓的复选框并单击按钮保存时，表应仅显示列的名和姓。

有人可以给我建议如何做到这一点？

编辑： 代码显示表：

<div class="table"> 
    <div class="row"> 
     <div class="col"> 
      <label> 
       <a (click)="sortColumn('firstName')"> 
        First Name<span> 
         <i *ngIf="order==1" class="fa fa-caret-down"></i> 
         <i *ngIf="order==(-1)" class="fa fa-caret-up"></i> 
        </span> 
       </a> 
      </label> 
     </div> 
     <div class="col"> 
      <label> 
       <a (click)="sortColumn('lastName')"> 
        Last Name<span> 
         <i *ngIf="order==1" class="fa fa-caret-down"></i> 
         <i *ngIf="order==(-1)" class="fa fa-caret-up"></i> 
        </span> 
       </a> 
      </label> 
     </div> 
     <div class="col"> 
      <label> 
       <a (click)="sortColumn('placeOfBirth')"> 
        Place of Birth<span> 
         <i *ngIf="order==1" class="fa fa-caret-down"></i> 
         <i *ngIf="order==(-1)" class="fa fa-caret-up"></i> 
        </span> 
       </a> 
      </label> 
     </div> 
     <div class="col"> 
      <label> 
       <a (click)="sortColumn('birthdate')"> 
        BirthDate<span> 
         <i *ngIf="order==1" class="fa fa-caret-down"></i> 
         <i *ngIf="order==(-1)" class="fa fa-caret-up"></i> 
        </span> 
       </a> 
      </label> 
     </div> 
    </div> 
    <div class="row" *ngFor="let user of users | sortingTable:path:order | paginate: { itemsPerPage: 45, currentPage: p}"> 
     <div class="col"> 
      <label>{{ user.firstName }}</label> 
     </div> 
     <div class="col"> 
      <label>{{ user.lastName }}</label> 
     </div> 
     <div class="col"> 
      <label>{{ user.placeOfBirth }}</label> 
     </div> 
     <div class="col"> 
      <label>{{ user.birthdate }}</label> 
     </div> 
    </div> 
</div> 

Answer 1

我假设有两个组成部分。 ModelComponent.ts和Checkbox.component.ts

在模式中，在复选框上写上“更改”功能。所以当你选中/取消选中的时候，这个事件就会发生。将所有对应于选中复选框的值保存在一个数组中。例如，如果你选中'firstName'，'lastName'，那么你的数组应该包含这两个值。 现在，当你点击保存按钮并将该数组作为参数传递给它时。 现在您可以使用共享服务（用于在两个组件之间进行通信）。您可以使用BehaviourSubject，然后在checkbox.component.ts文件中订阅它 查看https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service 用于使用服务的两个组件之间的通信。