带有 API 数据的 ngx-datatable 详细信息行不起作用

debugcn 发表于 Dev

巴尔加夫·帕特尔

我正在尝试创建一个 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

萨钦·贾格塔普

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。