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

Question

您好，我正在研究 Angular 5 项目。我正在使用 ngx 数据 table。我正在尝试实现行详细信息功能。我添加了 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 数据 table 如下例所示：

    <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>

Answer 2

After that try with this code---

<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>{{row.address.city}}</div>
            </div>
          </ng-template>
        </ngx-datatable-row-detail>
        <ngx-datatable-column *ngFor="let col of columns" 
           [name]="col.prop">
        </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.datatable-icon-right]="!expanded"
               [class.datatable-icon-down]="expanded"
               title="Expand/Collapse Row"
               (click)="toggleExpandRow(row)">Click on this link
            </a>
        </ng-template>
    </ngx-datatable-column>
    </ngx-datatable>

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

unable to add row details in Angular 5?

swingx

angular