Angular 基于在“角度”中单击按钮隐藏和显示表格的列

我在angular 7中实现了一个动态表。如果您看到我正在生成重复的列。您将看到在每一对的第一个字母上添加副词。我想要的是，默认情况下，重复列应该隐藏，并且应该仅在单击其对的“添加侧字母”按钮时显示

这是JSFIDLE

Html

---

请检查关于相关问题的其他问题的答案

如果您愿意，可以使用对象数组而不是两个数组来生成更容易理解的代码

columnsDef=[
  {description:'Legal Class name',key:'Description',duplicate:true},
  {description:'Last Edited',key:'AuditSummary',duplicate:true},
  {description:'Legal Class ID',key:'Id',duplicate:false}
]

还有你的.html

<table class="fundClassesTable table-striped" border="1">
    <tr *ngFor="let c of columnsDef;let i=index">
        <th class="tableItem bold">{{ c.description }}</th>
        <ng-container *ngFor="let f of data">
            <td>{{f[c.key]}}</td>
            <td *ngIf="c.duplicate">{{f[c.key]}}</td>
            <td><button (click)="c.duplicate=!c.duplicate">click</button></td>
        </ng-container>
    </tr>
</table>

{{c.description}}
{{f[c.key]}
{{f[c.key]}
点击

首先。变量ColumnNames实际上是您的行和数据属性描述，我认为您应该使用lodash或RxJS提供的

groupBy

。根据描述对数据进行分组，然后所有与B类对应的数据将一起循环显示数据，这样就不会因为不清晰而出现重复。这里的问题不是重复或消除重复。故意创建这些列来保存记录。我需要的能力，隐藏或显示整个部分点击按钮

columnsDef=[
  {description:'Legal Class name',key:'Description',duplicate:true},
  {description:'Last Edited',key:'AuditSummary',duplicate:true},
  {description:'Legal Class ID',key:'Id',duplicate:false}
]

<table class="fundClassesTable table-striped" border="1">
    <tr *ngFor="let c of columnsDef;let i=index">
        <th class="tableItem bold">{{ c.description }}</th>
        <ng-container *ngFor="let f of data">
            <td>{{f[c.key]}}</td>
            <td *ngIf="c.duplicate">{{f[c.key]}}</td>
            <td><button (click)="c.duplicate=!c.duplicate">click</button></td>
        </ng-container>
    </tr>
</table>