要解决这个问题,我们需要在子组件中手动设置表的高度,以确保所有行都可以被正确显示。具体的做法如下:
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent implements OnInit, AfterViewInit {
@ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
constructor() { }
ngOnInit() {
}
ngAfterViewInit(): void {
this.table.bodyHeight = 'calc(100vh - 400px)';
}
}
在这个示例中,我们将表格高度设置为“calc(100vh - 400px)”,这将确保当表格超过父容器的高度时,表格可以滚动显示所有行,而不是截断它们。
最后,确保在父组件中包含子组件,并将子组件嵌套在 ngx-datatable 的标记中。代码示例如下:
...
上一篇:Angular9模块化的路由