使用 ngx-datatable 进行多行扩展不起作用

问题描述

我正在尝试嵌套可扩展行，但无法实现。第一级工作正常，但第二级扩展抛出错误

这是我的 component.html

<ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow1 (toggle)="onDetailToggle($event)">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <div class="pl-5 pr-5 pt-3 pb-3 bgcolor">
        <ngx-datatable [loadingIndicator]="innerloadingIndicator" #table class='bootstrap datatable'
          [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [limit]="30"
          [rows]='innerdata'>
          <ngx-datatable-column name="name" prop="name"></ngx-datatable-column>
          <ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
          [canAutoResize]="false">
          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a href="javascript:void(0)" class="togglesize" [class.datatable-icon-right]="!expanded"
              [class.datatable-icon-down]="expanded" title="Expand/Collapse Row" (click)="toggleInnerExpandRow(row,expanded)">
            </a>
          </ng-template>
        </ngx-datatable-column>
        </ngx-datatable>
      </div>
    </ng-template>
  </ngx-datatable-row-detail>
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
    <div >
      <ngx-datatable #table class='bootstrap datatable'
        [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [limit]="30"
        [rows]='innerdata2'>
        <ngx-datatable-column name="test" prop="test"></ngx-datatable-column>
     
      </ngx-datatable>
    </div>
  </ng-template>
</ngx-datatable-row-detail>

    <!-- Row Detail Template -->

<ngx-datatable-column name="CTY" prop="Country"></ngx-datatable-column>
<ngx-datatable-column name="AMOUNT" prop="EarningAmount">
  <ng-template let-value="value" let-expanded="expanded" ngx-datatable-cell-template>
    {{value | currency}}
  </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="STATUS" prop="status"></ngx-datatable-column>
<ngx-datatable-column >
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <a href="javascript:void(0)" class="togglesize" [class.datatable-icon-right]="!expanded"
      [class.datatable-icon-down]="expanded" title="Expand/Collapse Row" (click)="toggleExpandRow(row,expanded)">
    </a>
  </ng-template>
</ngx-datatable-column>

component.ts：

@ViewChild('myTable') table: any;
  @ViewChild('myDetailRow') innertable: any;

  
  public list1 = [
    {
      "Country": "India","EarningAmount": 2,"status": "active"
    },{
   
      "Country": "US","status": "not active"
    }
    
]
public innerdata=[
  {

    "name": "abc","valid": "12/2/2024",},{

    "name": "def","valid": "12/2/2023",}
]

public innerdata2=[
  {

    "test": "xyz"
    },{

    "test": "pqr",}
]

  constructor() { }
  
  ngOnInit(): void {
  }
  
  onDetailToggle(event) {
    console.log('Detail Toggled',event);
  }

  
  toggleExpandRow(row,expanded) {
    console.log(row)
    this.table.rowDetail.toggleExpandRow(row);


  }

  toggleInnerExpandRow(row,expanded) {
    debugger
    console.log(row)
    this.innertable.rowDetail.toggleInnerExpandRow(row);


  }
   

建议我哪里出错

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）