So wählen Sie aus, welche Tabellenspalten angezeigt werden sollen

Question

Ich habe eine Tabelle mit Spalten (Vorname, Nachname, Geburtsort, Geburtsdatum und drei weitere). Über der Tabelle habe ich eine Schaltfläche, die ein Modal mit Kontrollkästchen mit Namen von Spalten öffnet.

Hier ist Code mit Kontrollkästchen.

<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> 

Also, wenn Kontrollkästchen für Vornamen und Nachnamen werden überprüft und, wenn die Schaltfläche Speichern geklickt wird, sollte Tabelle nur Spalten Vorname und Nachname zeigen.

Kann mir jemand Ratschläge geben, wie man das macht?

EDIT: -Code für die Anzeige Tabelle:

<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

Ich gehe davon aus, dass es zwei Komponenten. ModelComponent.ts und Checkbox.component.ts

Im modal, schreiben Sie eine 'ändern' Funktion auf Kontrollkästchen. In dem Moment, in dem Sie diese Option aktivieren/deaktivieren, wird dieses Ereignis ausgelöst. Speichern Sie alle Werte, die Kontrollkästchen in einem Array entsprechen. Wenn Sie zum Beispiel 'firstName', 'lastName' überprüfen, sollte Ihr Array diese beiden Werte enthalten. Jetzt, wenn Sie auf Speichern klicken und dieses Array als Parameter übergeben. Jetzt können Sie Shared Service verwenden (wird für die Kommunikation zwischen zwei Komponenten verwendet). Sie können BehaviourSubject verwenden und es dann in der checkbox.component.ts Datei abonnieren Werfen Sie einen Blick auf https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service für die Kommunikation zwischen zwei Komponenten mit Service.