Angular自定义指令无法调用函数，printerColumns绑定报错求助

1. 修复“Can't bind to 'printerColumns'”错误 #

<th>是原生HTML元素，不存在printerColumns内置属性，不能直接做属性绑定。需改用Angular的结构型指令（如*ngIf）或属性绑定（如CSS类）来控制列的显示状态。

2. 确保shouldHideColumn()函数正常调用 #

需在模板中正确关联组件内的函数，传递正确参数，保证语法无误。

组件类代码示例 #

export class TableComponent {
  // 存储需要隐藏的列名
  printerColumns = ['email', 'address'];

  shouldHideColumn(columnName: string): boolean {
    console.log(`校验列 ${columnName} 是否需要隐藏`);
    return this.printerColumns.includes(columnName);
  }
}

模板代码修改 #

方式1：用*ngIf完全移除DOM元素

<table>
  <thead>
    <tr>
      <th *ngIf="!shouldHideColumn('id')">ID</th>
      <th *ngIf="!shouldHideColumn('name')">姓名</th>
      <th *ngIf="!shouldHideColumn('email')">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of userList">
      <td *ngIf="!shouldHideColumn('id')">{{ user.id }}</td>
      <td *ngIf="!shouldHideColumn('name')">{{ user.name }}</td>
      <td *ngIf="!shouldHideColumn('email')">{{ user.email }}</td>
    </tr>
  </tbody>
</table>

方式2：用CSS类视觉隐藏（保留DOM结构）

<!-- 模板代码 -->
<table>
  <thead>
    <tr>
      <th [class.hidden]="shouldHideColumn('id')">ID</th>
      <th [class.hidden]="shouldHideColumn('name')">姓名</th>
      <th [class.hidden]="shouldHideColumn('email')">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of userList">
      <td [class.hidden]="shouldHideColumn('id')">{{ user.id }}</td>
      <td [class.hidden]="shouldHideColumn('name')">{{ user.name }}</td>
      <td [class.hidden]="shouldHideColumn('email')">{{ user.email }}</td>
    </tr>
  </tbody>
</table>

/* 组件样式 */
.hidden {
  display: none;
}

验证步骤 #

1. 打开浏览器控制台，查看是否有校验列 xxx 是否需要隐藏的日志输出，确认函数已被调用。
2. 检查页面表格，确认指定列是否按预期隐藏。

内容的提问来源于stack exchange，提问作者Karavana