Question

我正在尝试创建一个ngx-datatable，我可以用它来显示行切换的详细信息。

大多数一切正常但我无法弄清楚为什么我无法显示来自特定行点击的另一个api的数据。

我已经针对这个用例推荐了这个例子，

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

这就像一个魅力，现在我没有得到任何关于在此方法中传递API数据而不是行数据的文档，

 toggleExpandRow(row) {
     //HERE IS MY API CALL.
     console.log('Toggled Expand Row!', row);
     //I TRIED PASSING CUSTOM API DATA INSTEAD OF ROW HERE 
     this.table.rowDetail.toggleExpandRow(row);
}

我可以将数据结果集从api获取到控制台，但它没有扩展到html模板。

这是我的HTML模板，

 <!-- Row Detail Template -->
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
         //I WANT TO SHOW API DATA HERE
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <!-- Column Templates -->
     <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.datatable-icon-right]="!row.$$expanded"
          [class.datatable-icon-down]="row.$$expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>

请帮帮我。我使用 angular 4.3.4 和 ngx-datatable 9.3.0

Answer 1

尽管问题很老，但是解决方案仍然可以帮助那些将来可能会遇到的问题。首先，我们必须将一行中的一行传递给toggleExpandRow（row）。您可以通过将行传递给toggleExpandRow（row）来解决此问题，但是使用另一个变量以ngx-datatable-row-detail的形式显示数据。我添加了一个堆栈闪电来显示如何实现它。链接：https://stackblitz.com/edit/angular-nomjk3

带有API数据的ngx-datatable详细信息行无效

1 个答案: