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

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

如何选择要显示的表格列

1 个答案: