javascript - 在视图加载时展开 ngx-datatable
问题描述
有下面的 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>
解决方案
在使用带有 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);
推荐阅读
- python - 3D numpy 数组上的 PCA 实现
- python - 如何根据pytorch中的另一个张量选择索引
- java - 找到最小切割数
- c# - 选择查询 linq to sql 函数
- python - 创建和使用列识别客户 Pyspark
- amazon-web-services - 限制 setup.py 中定义的依赖项的安装
- google-cloud-source-repos - 创建新存储库时出错 (PERMISSION_DENIED)
- flutter-provider - StreamProvider 小部件显示的需要构建错误的标记
- automation - 如何将文件与谷歌驱动器上的密钥相关联?
- laravel - 类 '\Omnipay\FirstData\Gateway' 未找到 Laravel 8