javascript - Angular - 选中复选框时隐藏/显示表中的列

Question

当单击复选框时，我试图隐藏整列以及该列中的所有元素。我想知道使用 Angular 解决这个问题的最佳方法是什么。

 <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let user of Items" >
                        <td>{{user.Name}}</td>
                        <td>{{user.Email}}</td>
                        <td>{{user.Date}}</td>
                    </tr>
                    </tbody>
                </table>

表格上方有 3 个复选框:

名称 |电子邮件 |日期

我想按其中一个，然后整列消失，包括 <th>元素和<td>元素。解决这个问题的最佳主意是什么？

Answer 1

选中复选框时隐藏列。

在您的 .ts 中，为每列创建 3 个设置为 true 的变量。

showName = true;
showEmail = true;
showDate = true;

在各自的复选框中，您需要为每个复选框添加选中和更改调用，并将其与上面的 3 个 bool 值相匹配:

  <input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>

  <input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>

  <input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>

然后在每个相关的 th 和 td 中添加 *ngIf，例如名称 td 和 th:

<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>