Javascript 角度-根据真/假复选框元素显示表格元素

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

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

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

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

这是我的

---

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

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

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>

{{item.value}}

因为管道是在6.1中引入的，所以它只能在角度6之后支撑

然后在每列上：

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

{{tableList.Id}

你的stackblitz链接使用@angular/compiler@5.0.0，因此，这对keyvalue管道不起作用

---

希望它能给你指引前进的方向

通过查看表，您似乎已经知道所有列名。那么为什么要在另一个数组中检索它们并对它们进行迭代呢？