如何選擇要顯示哪個表列

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 用於使用服務的兩個組件之間的通信。