Question

要求使用中间服务将子组件中的每个复选框链接到父组件中的表列当前功能每个复选框都包含双向绑定 做什么会更好 例如

        //child emplate
    <input type="checkbox" [(ngModel)]="column_1">
    <input type="checkbox" [(ngModel)]="column_2">

//parent template
    <child #toggle></child> // child component selector
    <p-table >
        <ng-template pTemplate="header" let-columns>
           <tr>
              <th[hidden]="toggle.column_1">column_1</th>
              <th [hidden]="toggle.column_2">column_2</th>
           </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData>
          <td>
             <th [hidden]="toggle.column_1">{{rowData.column_1}}</th>
             <th [hidden]="toggle.column_2">{{rowData.column_2}}</th>
          </td>
      </ng-template>
    </p-table>

Answer 1

对于较小的用例，这种方法对example是有效的，如果您只是想在表格上切换几个不同的设置。

但是在这种情况下，它不是非常灵活，因为在父组件中对列布局所做的任何更改都必须反映在子组件中。应该避免这种紧密耦合。

更好的解决方案是将列定义数组传递给子组件（ column-chooser ）。然后，列选择器组件为每个项目动态呈现一个复选框，然后公开一个接受列标识符的方法，并返回一个描述该特定列可见性的布尔值，或者甚至更好使用@Ouput发出当前选定列的数组。

根据我所读的内容，您正在尝试使用复选框切换PrimeNG Table中的列。实际描述了in the PrimeNG Table documentation解决问题的方法。

作为PrimeNG的标准，它使用Angular structural directives，并且在这种情况下使用它们自己的MultiSelect component，它从与表组件共享的数组中添加和删除列定义。然后，表格组件仅呈现该数组中包含的列。

我没有在这里详细描述代码，而是基于文档代码创建了一个演示。

DEMO

将组件中的复选框绑定到其他组件中的表列的更好方法

1 个答案: