在Angular Datatable中隐藏多行

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective, DataTableRowComponent } from 'ngx-datatable';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
  data: any[] = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
    { name: 'Alice', age: 40 }
  ];
  hiddenRows: Set<number> = new Set<number>();

  constructor() { }

  ngOnInit() {
  }

  toggleRow(row: DataTableRowComponent): void {
    if (this.hiddenRows.has(row.$$index)) {
      this.hiddenRows.delete(row.$$index);
    } else {
      this.hiddenRows.add(row.$$index);
    }
  }

  isRowHidden(row: DataTableRowComponent): boolean {
    return this.hiddenRows.has(row.$$index);
  }
}

<ngx-datatable
  #table
  [rows]="data"
  [columnMode]="'flex'"
  [headerHeight]="50"
  [rowHeight]="50"
  [footerHeight]="50"
>
  <ngx-datatable-column name="Name" prop="name"></ngx-datatable-column>
  <ngx-datatable-column name="Age" prop="age"></ngx-datatable-column>
  <ngx-datatable-column name="Actions">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <button (click)="toggleRow(row)">Toggle</button>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-row-detail *ngFor="let row of table.rowDetail.templateCache"
                            [row]="row" [rowHeight]="100">
    <ng-template ngx-datatable-cell-template>
      Details...
    </ng-template>
  </ngx-datatable-row-detail>
</ngx-datatable>