在一个组件中，我初始化自定义聚集蛋白3次，但第一次只初始化重映射2次没有初始化

我在项目中为可重用的pusrpose创建了一个自定义(共享(ag网格，但如果我在一个组件中初始化自定义ag网格，它可以正常工作。像

example.html

<html>
<body>
<input type="text">
<md-app-aggrid [columnDefs]="columnDefs1" [rowData]="rowData1" 
(editEvent)="getData($event);" [pagination]="false" [enableSorting]="false"
[enableColResize]="false"></md-app-aggrid>
</body>
</html>

但现在，为了不同的验证目的，我尝试在一个组件中初始化自定义ag网格3次。

customgrid.html

<div *ngIf="gridId == 'aggrid1'">
<div [ngStyle]="style">
<ag-grid-angular style="width: 100%; height: 100%;" #agGrid class="ag- 
theme-blue" [rowData]="rowData" rowSelection="single"
[columnDefs]="columnDefs" [pagination]="pagination" 
[enableSorting]="enableSorting" [enableColResize]="enableColResize"
(input)="dataChange($event)" (gridReady)="onGridReady1($event)" 
(getSelectedRows)="getSelectedRows()" 
(cellClicked)="onCellClicked($event)">
</ag-grid-angular>
</div>
</div>
<div *ngIf="gridId == 'aggrid2'">
<div [ngStyle]="style">
<ag-grid-angular style="width: 100%; height: 100%;" #agGrid2 class="ag- 
theme-blue" [rowData]="rowData" rowSelection="single"
[columnDefs]="columnDefs" [pagination]="pagination" 
[enableSorting]="enableSorting" [enableColResize]="enableColResize"
(input)="dataChange($event)" (gridReady)="onGridReady2($event)" 
(getSelectedRows)="getSelectedRows()" 
(cellClicked)="onCellClicked($event)">
</ag-grid-angular>
</div>
</div>
<div *ngIf="gridId == 'aggrid3'">
<div [ngStyle]="style">
<ag-grid-angular style="width: 100%; height: 100%;" #agGrid3 class="ag- 
theme-blue" [rowData]="rowData" rowSelection="single"
[columnDefs]="columnDefs" [pagination]="pagination" 
[enableSorting]="enableSorting" [enableColResize]="enableColResize"
(input)="dataChange($event)" (gridReady)="onGridReady3($event)" 
(getSelectedRows)="getSelectedRows()" 
(cellClicked)="onCellClicked($event)">
</ag-grid-angular>
</div>
</div>

customeragrid.ts

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from 
'@angular/core';
import { AgGridNg2 } from 'ag-grid-angular';
@Component({
selector: 'md-app-aggrid2',
templateUrl: './app-aggrid2.component.html',
styleUrls: ['./app-aggrid2.component.scss']
})
export class AppAggrid2Component implements OnInit {
params2: any;
params3: any;
params1: any;
style: { width: any; height: any; };
public getRowNodeId: (data: any) => any;
selectedDataString: any;
public gridApi1;
public gridApi2;
public gridApi3;
public gridColumnApi;
// getting inputs from parent component
@Input() columnDefs: any;
// @Input() height: any;
// @Input() width: any;
@Input() pagination: any;
@Input() enableSorting: any;
@Input() enableColResize: any;
@Input() rowData: any;
@Input() gridLayout: any;
@Input() gridId: any;
// editing form using editevent in parent component
@Output() editEvent = new EventEmitter();
@Output() editEvent2 = new EventEmitter();
@Output() editEvent3 = new EventEmitter();
// removing data from array in parent component
@Output() removeEvent = new EventEmitter();
@ViewChild('agGrid') agGrid: AgGridNg2;
@ViewChild('agGrid2') agGrid2: AgGridNg2;
@ViewChild('agGrid3') agGrid3: AgGridNg2;
constructor() { }
ngOnInit() {
if (this.gridLayout === 'manageOrders1.1') {
this.setWidthAndHeight('100%', '250px');
} else if (this.gridLayout === 'manageOrders1.2') {
this.setWidthAndHeight('100%', '150px');
} else {
this.setWidthAndHeight('100%', '150px');
}
}
setWidthAndHeight(width, height) {
this.style = {
width: width,
height: height,
};
}
// initilize the ag-grid
onGridReady1(params) {
this.params1 = params;
console.log('onGridReady1', params);
this.gridApi1 = params.api;
this.gridColumnApi = params.columnApi;
}
onGridReady2(params) {
this.params2 = params;
console.log('onGridReady2', params);
this.gridApi2 = params.api;
this.gridColumnApi = params.columnApi;
}
onGridReady3(params) {
this.params3 = params;
console.log('onGridReady3', params);
this.gridApi3 = params.api;
this.gridColumnApi = params.columnApi;
}
// adding new row to the grid
submit(obj, grid) {
if (grid === 'aggrid2') {
this.gridId = 'aggrid2';
// this.onGridReady2(this.params2);
this.editEvent2.emit('Ravi aggrid2');
// const res1 = this.gridApi2.updateRowData({ add: [obj] });
const res1 = this.agGrid2.api.updateRowData({ add: [obj] });
} else if (grid === 'aggrid3') {
this.gridId = 'aggrid3';
this.editEvent3.emit('Ravi aggrid3');
// const res1 = this.gridApi3.updateRowData({ add: [obj] });
const res1 = this.agGrid3.api.updateRowData({ add: [obj] });
} else {
const res1 = this.gridApi1.updateRowData({ add: [obj] });
}
}
// checking the action type from cellClicked event
onCellClicked(e) {
if (e.event.target !== undefined) {
const actionType = e.event.target.getAttribute('data-action-type');
switch (actionType) {
case 'edit':
// callback to edit method in ag-grid
return this.onRowEdit(e);
case 'remove':
// callback to remove method in ag-grid
return this.onRemoveSelected(e);
case 'deleteAndSend':
// callback to remove method in ag-grid
return this.sendToTodaysGrid(e);
default:
// callback to remove method in ag-grid
return this.getSelectedData(e);
}
}
}
// emits the data in editevent to callback parent component
onRowEdit(e) {
this.editEvent.emit(e.data);
}
// emits the removing data and remove the selected data in ag-grid
onRemoveSelected(e) {
this.removeEvent.emit(e.data);
const selectedData = e.data;
const res2 = this.gridApi1.updateRowData({ remove: [selectedData] });
// alert('deleted successfully');
}
// update existing row in ag-grid by using index
update(obj, index) {
const rowNode = this.gridApi1.getRowNode(index);
rowNode.setData(obj);
}
// emits the data in editevent to callback parent component
getSelectedData(e) {
console.log('2 getSelectedData successfully' + e.data);
this.editEvent.emit(e.data);
}
sendToTodaysGrid(e) {
//..
}
}

Main.html

<div class="panel panel-primary">
<div class="panel-heading">
<span style="font-size: 16px"> Manage orders </span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 col-md-6 col-sm-6 col-xs-6">
<div class="panel panel-primary" style=" border: 1px solid gray;">
<div class="panel-body">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<md-app-search jsonType="Snomed" itemName="snomed_fsn" 
(typeOfJson)="jsonType=$event;" 
(afterSearchData)="selectedData($event);"
[dataShow]='false'></md-app-search>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<input type="radio" name="radio1" checked 
(click)="selectOption(r.value)" #r value="all">All
<input type="radio" name="radio1" 
(click)="selectOption(r1.value)" #r1 value="pre">Previous Orders
</div>
</div>
<div class="row" style="padding-top: 10px">
<div class="col-lg-5 col-md-5 col-sm-5">
<div class="input-group">
By&nbsp;&nbsp;
<select class="form-control input-sm">
<option value="" disabled selected></option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<select class="form-control input-sm">
<option value="" disabled selected></option>
</select>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="input-group">
Type &nbsp;&nbsp;
<select class="form-control input-sm">
<option value="" disabled selected></option>
</select>
</div>
</div>
</div>
<div class="row" style="padding-top: 10px">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="input-group">
Lab Company &nbsp;&nbsp;
<select class="form-control input-sm">
<option value="" disabled selected></option>
</select>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
</div>
</div>
</div>
</div>
<md-app-aggrid2 gridId="aggrid1" [columnDefs]="columnDefs1" 
[rowData]="rowData1" gridLayout="manageOrders1.1" 
(editEvent)="getData($event);"
[pagination]="false" [enableSorting]="false" 
[enableColResize]="false"></md-app-aggrid2>
</div>
<div class="col-md-6 col-md-6 col-sm-6 col-xs-6">
<input type="radio" name="radio2" checked 
(click)="todaysOrders(t.value)" #t value="today">Today's Orders
<md-app-aggrid2 gridId="aggrid2" [columnDefs]="columnDefs2" 
[rowData]="rowData2" gridLayout="manageOrders1.2" 
(editEvent2)="getData2($event);"
[pagination]="false" [enableSorting]="false" 
[enableColResize]="false"></md-app-aggrid2>
<br>
<input type="radio" name="radio2" (click)="todaysOrders(f.value)" #f 
value="future">Future Orders
<span style=" padding-left: 255px">Order Date : </span>&nbsp;{{date | 
date:'MM/dd/yyyy'}}
<md-app-aggrid2 gridId="aggrid3" [columnDefs]="columnDefs3" 
[rowData]="rowData3" gridLayout="manageOrders1.2" 
(editEvent3)="getData3($event);"
[pagination]="false" [enableSorting]="false" 
[enableColResize]="false"></md-app-aggrid2>
</div>
</div>
</div>
</div>

所以如果我点击第一个ag网格中的任何一行，该行应该添加到第二个ag网格。这是我必须做的。但如果点击第一个ag网格，那一行只会添加到同一个(第一个(ag网格中。第二个或第三个ag网格并没有全部初始化。请提出一些建议。

customgrid.html

<div [ngStyle]="style">
<ag-grid-angular style="width: 100%; height: 100%;" #agGrid class="ag-theme-blue" 
[rowData]="rowData" rowSelection="single"
[columnDefs]="columnDefs" [pagination]="pagination" [enableSorting]="enableSorting" 
[enableColResize]="enableColResize"
(input)="dataChange($event)" (gridReady)="onGridReady($event)" 
(getSelectedRows)="getSelectedRows()" (cellClicked)="onCellClicked($event)">
</ag-grid-angular>
</div>

在我的customgrid.html是这个之前，为了执行我的输出目的，我在我的customeragrid.html中创建了3个ag网格。我期待着你(RajeshKdev(给出不同的答案。

您必须使用不同的[gridOptions]和网格标识#Grid。

更新者 un.spike：若已经为API引用绑定定义了(GridReady(函数，则不需要使用标签绑定# + @ViewChild('...') ...;。

视图：

<ag-grid-angular
style="width: 100%; height: 45%"
#topGrid
class="ag-theme-balham"
[rowData]="rowData"
[gridOptions]="topOptions"
[columnDefs]="columnDefs"
(firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
<ag-grid-angular
style="width: 100%; height: 45%"
#bottomGrid
class="ag-theme-balham"
[rowData]="rowData"
[gridOptions]="bottomOptions"
[columnDefs]="columnDefs"
(firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>

型号：

export class AppComponent {
columnDefs;
rowData;
topOptions = {alignedGrids: []};
bottomOptions = {alignedGrids: []};
@ViewChild('topGrid') topGrid;
@ViewChild('bottomGrid') bottomGrid;
constructor(private http: HttpClient) {
this.columnDefs = [
{headerName: 'Athlete', field: 'athlete', width: 200},
{headerName: 'Age', field: 'age', width: 150},
{headerName: 'Country', field: 'country', width: 150},
{headerName: 'Year', field: 'year', width: 120},
{headerName: 'Date', field: 'date', width: 150},
{headerName: 'Sport', field: 'sport', width: 150},
{
headerName: 'Medals',
children: [
{
headerName: "Total", columnGroupShow: 'closed', field: "total",
valueGetter: "data.gold + data.silver + data.bronze", width: 200
},
{headerName: "Gold", columnGroupShow: 'open', field: "gold", width: 100},
{headerName: "Silver", columnGroupShow: 'open', field: "silver", width: 100},
{headerName: "Bronze", columnGroupShow: 'open', field: "bronze", width: 100}
]
}
];
this.topOptions.alignedGrids.push(this.bottomOptions);
this.bottomOptions.alignedGrids.push(this.topOptions);
}
ngOnInit() {
this.http.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json').subscribe(data => {
this.rowData = data;
});
}
}

你可以在这里阅读更多关于这方面的内容，还有一个角度的例子，你也可以在Plunker中查看。

希望这能有所帮助。，

相关内容

最新更新

热门标签：