Как использовать метод emit в ag-grid-angular. В ag-grid-angular у меня есть кнопки, которые должны скрываться попеременно и при нажатии на другую строку.
Когда я нажимаю на другую строку, кнопка не меняется.
Я пытаюсь использовать метод emit, но я не вижу его в моем другом компоненте ButtComponent, где у меня естькнопок. Я не знаю, если это хорошая идея.
gridComponent.component.html:
<ag-grid-angular
(rowSelected)="onRowSelected($event)"
[rowSelection]="rowSelection"
(selectionChanged)="onSelectionChanged($event)"
[suppressChangeDetection]='true'
#agGrid
style="width: 100%; height: 100%;"
id="uprawnieniaGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
[frameworkComponents]="frameworkComponents"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
gridComponent.component.ts:
export class GridComponent implements OnInit {
@Output() eventEmitter: EventEmitter<string> = new EventEmitter<string>();
rowData:any;
frameworkComponents: any;
gridApi?: GridApi;
columnApi?: ColumnApi;
columnDefs:any;
constructor( private dataService: DataService ) {
this.frameworkComponents = {
buttons: ButtComponent,
col5RenderComponent: Col3RenderComponent,
};
this.columnDefs = [{
headerName: '',
headerCheckboxSelection: true,
checkboxSelection: true,
}, {
headerName: 'col 1',
field: 'col1'
}, {
headerName: 'col 2',
field: 'col2'
}, {
headerName: 'col 3 ',
field: 'col3',
editable: true,
cellRenderer: 'col3RenderComponent'
}, {
headerName: "Edition",
field: "value",
cellRenderer: "buttons",
colId: "edition"
}
];
}
ngOnInit() {
this.dataService.dataList().subscribe(dataList => {
if (dataList.data) {
this.rowData = dataList.data;
}
});
}
onGridReady(params: any) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
params.api.sizeColumnsToFit();
}
onSelectionChanged(event: any) {
var rowCount = event.api.getSelectedNodes().length;
console.log("selection changed, " + rowCount + " rows selected");
}
onRowSelected(event: any) {
console.log("row " + event.node.data.id + " selected = " + event.node.selected);
if (event.node.selected == false){
this.eventEmitter.emit('Register click');
console.log('EMIT');
}
}
}
ButtComponent.component. html:
У меня есть кнопки, но метод eventEmitterTemp не вызывается.
<i (click)="onClick1($event)" (eventEmitter)='eventEmitterTemp($event)' *ngIf="isShowButton.val1" class='fa fa-edit' ></i>
<i (click)="onClick2($event)" *ngIf="isShowButton.val2" class='fa fa-save' ></i>
buttComponent.component.ts:
export class ButtComponent implements ICellRendererAngularComp {
params: any;
isShowButton = {
val1: true,
val2: false
};
agInit(params: any): void {
this.params = params;
}
constructor(private dataService: DataService) {}
refresh(params: any): boolean {
this.isShowButton.val1 = false;
this.isShowButton.val2 = true;
console.log('refresh');
return true;
}
onClick1($event: any) {
this.isShowButton.val1 = false;
this.isShowButton.val2 = true;
const startParams = {
rowIndex: this.params.data.id - 1,
colKey: 'col4'
};
this.params.api.startEditingCell(startParams);
}
onClick2($event: any) {
this.isShowButton.val1 = true;
this.isShowButton.val2 = false;
this.dataService.dataSet().subscribe(dataList => {
if (dataList.data) {
this.rowData = dataList.data;
}
});
}
eventEmitterTemp($event: any){
this.isShowButton.val1 = false;
this.isShowButton.val2 = true;
console.log('-----EMIT GET 1');
}
}
Как запустить метод eventEmitterTemp из компонента GridComponent из метода onRowSelected при выполнении условия:if (event.node.selected == false)
Большое спасибо за помощь.