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

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 中显示数据。我添加了一个 stackblitz 来展示我是如何实现它的。 Link: https://stackblitz.com/edit/angular-nomjk3

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

ngx-datatable detail row with API data not working

ngx-datatable

angular