Question

您好我正在开展Angular 5项目。我正在使用ngx数据表。我正在尝试实现行详细信息功能。我添加了ngx-datatable-row-detail和ngx-datatable-column。要扩展行箭头符号应该来，但在我的情况下什么都没有。以下是我的代码。

<ngx-datatable class="material colored-header sm table-hover"
                   [loadingIndicator]="loadingIndicator"
                   [rows]="rows"
                   [rowHeight]="35"
                   [headerHeight]="35"
                   [footerHeight]="35"
                   [columns]="columns"
                   [limit]="10"
                   [columnMode]="'force'">
    </ngx-datatable>

    <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;">
                <div><strong>Address</strong></div>
                <div>ggg</div>
            </div>
        </ng-template>
    </ngx-datatable-row-detail>

    <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]="!expanded"
               [class.datatable-icon-down]="expanded"
               title="Expand/Collapse Row"
               (click)="toggleExpandRow(row)">
            </a>
        </ng-template>
    </ngx-datatable-column>

下面是我的类型脚本代码。

 toggleExpandRow(row) {
        console.log('Toggled Expand Row!', row);
        this.table.rowDetail.toggleExpandRow(row);
    }

    onDetailToggle(event) {
        console.log('Detail Toggled', event);
    }

我正在关注https://swimlane.github.io/ngx-datatable/#row-details。

有人可以帮我解决这个问题吗？谢谢

Answer 1

首先<ngx-datatable-column></ngx-datatable-column>进入ngx数据表，如下例所示：

    <ngx-datatable #myTable
      class="material server-scrolling-table"
      [rows]="rows"
      [columns]="columns"
      [columnMode]="'force'"
      [headerHeight]="headerHeight"
      [rowHeight]="rowHeight"
      [loadingIndicator]="isLoading"
      [selectionType]="'checkbox'"
      [scrollbarV]="true"
      [hidden]="hideTable"
      (scroll)="onScroll($event.offsetY)"
    >
        <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;">
              <div><strong>Address</strong></div>
                <div>ggg</div>
            </div>
          </ng-template>
        </ngx-datatable-row-detail>

<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]="!expanded"
               [class.datatable-icon-down]="expanded"
               title="Expand/Collapse Row"
               (click)="toggleExpandRow(row)">
            </a>
        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

无法在Angular 5中添加行详细信息？

2 个答案: