Невозможно добавить детали строки в Angular 5?

Question

Привет, я работаю над Angular 5 Project. Я использую таблицу данных 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

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>

Answer 2

Прежде всего <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>