表示する表の列を選択する方法

Question

私は列（名、姓、生年月日、生年月日など）を持つ表を持っています。 テーブルの上には、列の名前を持つチェックボックス付きのモーダルを開くボタンがあります。

ここにチェックボックス付きのコードがあります。

したがって、姓と名のチェックボックスをオンにしてボタンの保存をクリックすると、表には姓と名のみが表示されます。

誰かに私にアドバイスを与えることができますか？

EDIT：テーブルを表示するための コード：

<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

私は2つのコンポーネントがあると仮定しています。 ModelComponent.tsとCheckbox.component.ts

モーダルでは、チェックボックスに「変更」機能を記述します。あなたがチェック/チェックを外した瞬間、このイベントは火事になります。チェックされたチェックボックスに対応するすべての値を配列に保存します。たとえば、 'firstName'、 'lastName'をチェックすると、配列にこれらの2つの値が含まれているはずです。 保存ボタンをクリックし、この配列をパラメータとして渡します。 共有サービス（2つのコンポーネント間の通信に使用）を使用できるようになりました。 BehaviourSubjectを使用して、checkbox.component.tsファイルで購読することができます サービスを使用している2つのコンポーネント間の通信にはhttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service を見てください。