Angular 7以编程方式显示表头 - * ngFor和* ngIf在同一选择器上

Question

我有一个对象定义表必须具有的标头，其中一些标头设置为隐藏，不得在表上显示。

sampleTable: {
headers: [{
  name: 'Description',
  isHidden: false
}, {
  name: 'Active',
  isHidden: false
}, {
  name: 'Code',
  isHidden: false
}, {
  name: 'recordId',
  isHidden: true,
}]
}

在此示例中，名为“recordId”的标头设置为hidden = true，这意味着它必须NOT DISPLAY

我试过了明显的事：

<tr>
  <th>Fixed Column start</th>
  <th *ngFor="let header of sampleTable.headers" *ngIf="!header.isHidden">{{header.name}}</th>
  <th>Fixed Column end</th>
</tr>

Angular不支持同一元素上的2个结构指令。

随后，我尝试过：

<tr>
  <th>Fixed Column start</th>
   <template *ngFor="let header of resourceConfiguration.headers">
      <th *ngIf="header.isHidden === true" [nzWidth]="header.width" nzAlign="left">{{header.name}}</th>
    </template>
  <th>Fixed Column end</th>
</tr>

但它只显示2个固定列。

如何以编程方式隐藏隐藏某些列？

我知道还有其他几个类似的问题，但我找不到这个问题的解决方案，虽然看起来很直接。在开头和结尾都有固定列会使这一点变得复杂。

该表是可重用的组件，基于配置对象必须显示不同的列。

Answer 1

我认为你想要实现的所有目标已经解决，你将拥有许多可用的功能。我将强调为此组件创建自定义行为的功能。

我的建议是Angular DataTables qazxsw poi

如果您需要实施方面的帮助，请不要犹豫，请给我留言。快乐的编码