Angular - 根据真/假复选框元素显示表格元素

Question

我正在尝试创建一个复选框和表格列表。我的目标是在特定复选框设置为 false 时隐藏表格中的特定元素。

例如：当我按下 'Id' -> '20' 应该消失（stackblitz 示例）

我从 API（json 文件）获取数据。我的想法是创建第二个包含名称和状态的数组（默认设置为 true -> 以显示复选框）以显示复选框列表。

但我不知道如何连接，所以表格的元素可以根据选中/未选中的复选框显示。

这是我的example

有人知道如何解决这个问题吗？

Answer 1

使用和对象类似的状态来跟踪列状态：

status =  {
    id: false,
    email: true,
    login: true,
    phone: true
  };

绑定键值：

<li *ngFor="let item of status | keyvalue">
    <div>
        <input type="checkbox"
  [(ngModel)]="item.key" />
        <div class="state">
            <label>{{item.value}}</label>
        </div>
    </div>
</li>

它只支持 angular 6 之后，因为 keyvalue 管道是在 6.1 中引入的

然后在每一列上：

<td *ngIf="status.id">{{tableList.Id}}</td>

您的 stackblitz 链接使用的是@angular/compiler@5.0.0，因此这不适用于键值管道。

希望能给你指明前进的方向！