Question

将下面的ngx-datatable放在我想在视图加载时扩展第一行的位置。我试图在角度生命周期挂钩ngAfterViewChecked上调用toggleExpandRow（this.table.row [0]），并且模板没有随着行的扩展而更新。之前有人用ngx-datatable完成此操作吗？以下代码无法运行，并且仅用于提供信息。

import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnInit,
  ChangeDetectionStrategy,
  ViewEncapsulation,
  ViewChild
} from '@angular/core';
import { defaultTrackByFn } from '@shared/utils';
import { Datatable } from '@app/stores/dashboard-store/models/datatable.model';
import { DatatableComponent as ngxDatatableComponent } from '@swimlane/ngx-datatable';
import { Observable } from 'rxjs';
import { ActiveToggleService } from '@dashboard/services/ActiveToggle.service';

@Component({
  selector: 'fmsl-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatatableComponent implements OnInit {
  @Input()
  datatable: Datatable;

  @Input()
  isBorrower: boolean;

  @ViewChild('loanTable')
  table: ngxDatatableComponent;

  @Input()
  showLegend: boolean = true;
  trackByFn: Function = defaultTrackByFn;

  // TODO: Implement Datatable Actions
  actions = ['replace with logic later'];

  isBorrower$: Observable<boolean>;

  constructor(private _toggleService: ActiveToggleService) {}

  ngOnInit() {
    // console.log('table:', this.table)
    // console.log('table row detail', this.table.rowDetail)
    // this.table.rowDetail.expandAllRows();
  }

  ngAfterViewChecked() {
    console.log('table:', this.table)
    console.log('table row detail', this.table.rowDetail)
    console.log('table row:', this.table._rows[0])
    this.table.rowDetail.toggleExpandRow(this.table._rows[0]);
  }

  toggleExpandRow(row) {
    console.log('row toggled', row);
    console.log('row table', this.table);
    this.table.rowDetail.toggleExpandRow(row);
  }

  onDetailToggle(event) {
    // on row detail expand we can do something
  }
  toggleActiveInactive(row) {
    const { uuid, loanStatusTypeName } = row;
    this._toggleService.toggleActiveInactive({ uuid, loanStatusTypeName });
  }
}

<div class="row datatable-row">
  <div class="col">
    <!--mdc-replace datatable-->
    <div [ngClass]="datatable.tableClass">
      <!-- {{ datatable | json }} -->
      <ngx-datatable
        #loanTable
        class="material expandable"
        [rows]="datatable.rows"
        [columnMode]="'flex'"
        rowHeight="auto"
        sortType="single"
        [headerHeight]="42"
        [footerHeight]="0"
        [scrollbarH]="true"
        [footerHeight]="0"
        [loadingIndicator]="datatable.loading"
        [messages]="datatable.messages"
      >
        <ngx-datatable-row-detail [rowHeight]="44" (toggle)="onDetailToggle($event)">
          <ng-template
            let-row="row"
            let-expanded="expanded"
            ngx-datatable-row-detail-template
          >
            <div class="expansion-row" style="padding-left:35px;">
              <mdc-icon class="material-icons" aria-hidden="true">info_outline</mdc-icon>
              <span
                [innerHTML]="row.statusProperties.statusDetail"
                class="datatable__expansion-row-message"
              ></span>
            </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-column
          *ngFor="let col of datatable.columns; index as i; trackBy: trackByFn"
          [name]="col.name"
          resizeable="false"
          [flexGrow]="col.flex"
          [prop]="col.prop"
          [pipe]="col.pipe"
        >
          <ng-template let-column="column" ngx-datatable-header-template let-expanded="true">
            {{ col.name }}
          </ng-template>
          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <div class="table-cell justify-content-start" [attr.data-heading]="col.name">
              <span *ngIf="col.isIcon; else progressCell">
                <fmsl-datatable-icon
                  *ngIf="value"
                  [actionRequiredBy]="value"
                  [legend]="datatable.legend"
                  [currentRole]="datatable.currentRole"
                ></fmsl-datatable-icon>
              </span>

              <div *ngIf="col.isActions" class="rowActions">
                <button mdc-button (click)="toggleActiveInactive(row)">
                  Mark {{ row.loanStatusTypeName === 'active' ? 'Inactive' : 'Active' }}
                </button>
              </div>

              <ng-template #progressCell>
                <div *ngIf="col.isProgress; else linkCell" class="progress-container">
                  <mdc-linear-progress
                    class="progress-bar loan-status-progress-bar"
                    [determinate]="true"
                    [progress]="value"
                  ></mdc-linear-progress>
                </div>
              </ng-template>

              <ng-template #linkCell>
                <span *ngIf="col.isLink; else valueCell">
                  <a
                    *ngIf="row.sharePointURL; else internalLink"
                    target="_blank"
                    href="{{ row.sharePointURL }}"
                    >{{ value }}
                  </a>
                  <ng-template #internalLink>
                    <a [routerLink]="['/dashboard/deal', 'loan-request-info', row.uuid]">{{
                      value
                    }}</a>
                  </ng-template>
                </span>
              </ng-template>

              <ng-template #valueCell>
                <span>{{ value }}</span>
              </ng-template>
            </div>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </div>
</div>

Answer 1

将切换功能与onInit和afterViewInit挂钩一起使用时，存在一个https://github.com/swimlane/ngx-datatable/issues/929问题。

在ngAfterViewChecked内部调用切换功能不是一个好主意，因为此挂钩将被多次调用。并且一旦将其扩展，就无法折叠。

仍然有一个肮脏的解决方法，可以在setTimeout内的AfterViewInit中调用切换功能：

@ViewChild(DatatableComponent) private table: DatatableComponent;
constructor(private cdRef: ChangeDetectorRef) {}

setTimeout(() => {
    this.table.rowDetails.toggleExpandedRow(ROW);
    this.cdRef.detectChanges();
}, 1000);

在视图加载时扩展ngx-datatable

1 个答案: