如果ngx-datatable不存在子项,如何删除展开按钮

问题描述 投票:0回答:1

我使用以下代码在 ngx-datatable 中生成树视图:

HTML:

<ngx-datatable
  [rows]="rows"
  class="material"
  [loadingIndicator]="false"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [columns]="columns"
  [rowClass]="getRowClass"
  [reorderable]="reorderable"
  [treeFromRelation]="'manager'"
  [treeToRelation]="'id'"
  [rows]="rows"
  (treeAction)="onTreeAction($event)"
>
  <ngx-datatable-column name="name" [flexGrow]="3" [isTreeColumn]="true">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="gender" [flexGrow]="3">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

TS:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  reorderable: boolean = true;
  loadingIndicator: boolean = true;

  rows = [
    {
      id: 1,
      name: 'Austin',
      gender: 'Male',
      company: 'Swimlane',
    },
    { id: 2, name: 'Dany', gender: 'Male', company: 'KFC' },
    {
      id: 3,
      name: 'Molly',
      gender: 'Female',
      company: 'Burger King',
      manager: 1,
      class: 'child-row-file',
    },
  ];
  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
  onTreeAction(event: any) {
    console.log('toggle');
    const index = event.rowIndex;
    const row = event.row;
    if (row.treeStatus === 'collapsed') {
      row.treeStatus = 'expanded';
    } else {
      row.treeStatus = 'collapsed';
    }
    this.rows = [...this.rows];
  }
  getRowClass(event) {
    console.log(event);
    if (event.class) {
      if (event.class == 'child-row-file')
        return {
          'child-row-file': true,
        };
    }
  }
}

代码工作正常,我能够生成树视图。 运行示例

问题: 因为,您可以检查第二个父级没有子级,但它仍然显示展开按钮。如果没有孩子在场,我如何删除此按钮。

angular treeview angular9 ngx-datatable
1个回答
0
投票

我目前正在寻找相同的东西。你解决这个问题了吗?

© www.soinside.com 2019 - 2024. All rights reserved.