如何在特定条件下隐藏p-table表头中的p-dropdown组件？

我用PrimeNG的p-table实现了一个表格，在表头的<th>里加了个p-dropdown组件。需求是：当导入的所有customer数据的Level字段全为"Secured"时，隐藏这个下拉框。试了两种*ngIf写法都没效果，求解决办法。

代码示例 #

<p-tabPanel>
  <a *ngIf="customer.length; else NoCustomer">
    <p-table
      #Customer
      [value]="customer"
      [scrollable]="true"
      [(selection)]="selectedCustomer"
    >
      <ng-template pTemplate="header" let-newCustomer>
        <tr>
          <th>
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            Select All
          </th>
          <th>Name</th>
          <th>Age</th>
          <th>
            <p-dropdown
              [options]="phoneNumber"
              optionLabel="PhoneNumber"
            ></p-dropdown>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-newCustomer>
        <tr>
          <td>
            <p-tableCheckbox [value]="customer"></p-tableCheckbox>
          </td>
          <td>{{ newCustomer.Name }}</td>
          <td>{{ newCustomer.Age }}</td>
        </tr>
      </ng-template>
    </p-table>
  </a>
  <ng-template #NoCustomer>
    <h1>No New Customers</h1>
  </ng-template>
</p-tabPanel>

数据示例 #

[
  {
      "Name" : "Jason",
      "Age" : 29,
      "PhoneNumber": "111-222-3333",
      "Level": "Secured"
  },
  {
      "Name" : "Smith",
      "Age" : 56,
      "PhoneNumber": "222-333-4444",
      "Level": "Secured"
  },
  {
      "Name" : "Jackson",
      "Age" : 18,
      "PhoneNumber": "333-444-5555",
      "Level": "Secured"
  }
]

尝试过的无效代码 #

<th *ngIf="newCustomer && newCustomer.Level !== 'Secured'">
  <p-dropdown
    [options]="phoneNumber"
    optionLabel="PhoneNumber"
  ></p-dropdown>
</th>

<th>
  <p-dropdown
    *ngIf="newCustomer && newCustomer.Level !== 'Secured'"
    [options]="phoneNumber"
    optionLabel="PhoneNumber"
  ></p-dropdown>
</th>

你之前的写法无效，核心问题是表头模板里的let-newCustomer根本取不到单条数据——PrimeNG表头模板的上下文里没有单条记录，newCustomer在这里是undefined，所以判断逻辑完全不生效。

正确的做法是直接基于组件里的customer数组做全局判断，以下是两种可行方案：

方案1：模板内直接判断（简洁写法） #

用Array.every()方法直接在模板里判断所有customer的Level是否全为"Secured"，取反后作为显示条件：

<th *ngIf="!customer.every(item => item.Level === 'Secured')">
  <p-dropdown
    [options]="phoneNumber"
    optionLabel="PhoneNumber"
  ></p-dropdown>
</th>

方案2：组件类封装方法（易维护） #

如果后续逻辑需要扩展，推荐把判断逻辑抽到组件类里：

// 组件.ts文件
hasUnsecuredCustomer(): boolean {
  return !this.customer.every(item => item.Level === 'Secured');
}

然后模板里调用方法：

<th *ngIf="hasUnsecuredCustomer()">
  <p-dropdown
    [options]="phoneNumber"
    optionLabel="PhoneNumber"
  ></p-dropdown>
</th>

完整修改后的代码片段 #

<p-tabPanel>
  <a *ngIf="customer.length; else NoCustomer">
    <p-table
      #Customer
      [value]="customer"
      [scrollable]="true"
      [(selection)]="selectedCustomer"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            Select All
          </th>
          <th>Name</th>
          <th>Age</th>
          <!-- 使用方案1的模板直接判断 -->
          <th *ngIf="!customer.every(item => item.Level === 'Secured')">
            <p-dropdown
              [options]="phoneNumber"
              optionLabel="PhoneNumber"
            ></p-dropdown>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-newCustomer>
        <tr>
          <td>
            <!-- 修复：把绑定的customer改成newCustomer -->
            <p-tableCheckbox [value]="newCustomer"></p-tableCheckbox>
          </td>
          <td>{{ newCustomer.Name }}</td>
          <td>{{ newCustomer.Age }}</td>
        </tr>
      </ng-template>
    </p-table>
  </a>
  <ng-template #NoCustomer>
    <h1>No New Customers</h1>
  </ng-template>
</p-tabPanel>

补充说明 #

• 表头模板里的let-newCustomer是多余的，直接删掉即可
• 顺便修复了你原来的一个小问题：<p-tableCheckbox [value]="customer">应该改成[value]="newCustomer"，不然选框绑定的是整个数组，会导致选择功能异常

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