在Angular 5中,可以使用ag-grid来显示和隐藏行。以下是一个使用ag-grid显示和隐藏行的示例解决方法:
npm install --save ag-grid ag-grid-angular
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
@Component({
selector: 'app-my-grid',
templateUrl: './my-grid.component.html',
styleUrls: ['./my-grid.component.css']
})
export class MyGridComponent {
gridOptions: GridOptions;
constructor() {
this.gridOptions = {};
this.gridOptions.columnDefs = [
// 列定义
// ...
];
this.gridOptions.rowData = [
// 行数据
// ...
];
}
}
this.gridOptions.rowClassRules = {
// 根据条件设置行的CSS类
'hide-row': function(params) {
// 返回true表示隐藏行
// 返回false表示显示行
// 条件可以是任何你想要的
return params.data.someProperty === 'hide';
}
};
.hide-row {
display: none !important;
}
import { ViewChild } from '@angular/core';
export class MyGridComponent {
@ViewChild('agGrid') agGrid: AgGridAngular;
// ...
onRowDataChanged() {
this.agGrid.api.refreshCells();
}
}
现在,当满足条件时,行将被隐藏。当行数据发生变化时,调用onRowDataChanged方法来刷新单元格。