如何基于行索引隐藏ngx-datatable中索引为0的行？

我来帮你搞定这个隐藏指定行的需求～你之前在列模板里加*ngIf="rowIndex != 0"的方式其实只会隐藏该列的内容，整行还是会留在表格里，下面给你两种更靠谱的方案：

方案1：从数据源层面过滤（推荐） #

最高效的方式是直接给表格的rows传入过滤后的数组，这样第0行根本不会被渲染出来，省去了DOM层面的隐藏操作：

<ngx-datatable 
  class="data-table table-responsive task-list-table" 
  [rows]="branches.slice(1)"  <!-- 用slice(1)去掉第一个元素 -->
  [loadingIndicator]="loadingIndicator" 
  [columnMode]="'force'" 
  [headerHeight]="50" 
  [footerHeight]="50" 
  [limit]="10" 
  [rowHeight]="66" 
  [reorderable]="reorderable">
  
  <!-- 你的列定义 -->
  <ngx-datatable-column name="Branch Office Name">
    <ng-template let-branch="row" ngx-datatable-cell-template>
      {{branch.branchOfficeName}}
    </ng-template>
  </ngx-datatable-column>
  
  <!-- 其他列... -->
</ngx-datatable>

方案2：在模板层面控制行的显示（保留原始数据源时用） #

如果必须保留完整的branches数组，你可以通过自定义行模板来控制是否渲染指定行：

<ngx-datatable 
  class="data-table table-responsive task-list-table" 
  [rows]="branches" 
  [loadingIndicator]="loadingIndicator" 
  [columnMode]="'force'" 
  [headerHeight]="50" 
  [footerHeight]="50" 
  [limit]="10" 
  [rowHeight]="66" 
  [reorderable]="reorderable">
  
  <!-- 自定义行模板，通过rowIndex判断是否渲染 -->
  <ng-template ngx-datatable-row-template let-row="row" let-rowIndex="rowIndex">
    <div *ngIf="rowIndex !== 0" role="row" class="datatable-row">
      <datatable-row-wrapper [row]="row" [rowIndex]="rowIndex" [columns]="columns">
      </datatable-row-wrapper>
    </div>
  </ng-template>
  
  <!-- 你的列定义 -->
  <ngx-datatable-column name="Branch Office Name">
    <ng-template let-branch="row" ngx-datatable-cell-template>
      {{branch.branchOfficeName}}
    </ng-template>
  </ngx-datatable-column>
  
  <!-- 其他列... -->
</ngx-datatable>

另外也可以用rowClass结合CSS隐藏的方式：

1. 在组件里定义行类判断方法：

getRowClass(row: any): string {
  const rowIndex = this.branches.indexOf(row);
  return rowIndex === 0 ? 'hidden-row' : '';
}

2. 在模板里绑定rowClass：

<ngx-datatable [rowClass]="getRowClass" ...>

3. 添加CSS样式：

.hidden-row {
  display: none !important;
}

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