Question

我正在尝试在ag-grid上创建一个可以在我的应用程序中使用的通用组件。当我在某些父组件中使用此公共组件并调用该服务以获取数据并将其传递给公共组件时，网格将在数据到达之前呈现。

直到现在我都尝试过这些东西 1. ngOnchanges方法

ngOnChanges(){


     console.log(this.entityData);
         this.gridOptions = <GridOptions>{};
        this.gridOptions = {
          onGridReady: () => {
              this.gridOptions.api.setRowData(this.entityData);
          }
        };

  }

常见组件：

import {组件，OnInit，ChangeDetectionStrategy，HostBinding，输入，来自'@ angular / core'的输出，EventEmitter，OnChanges};

从“ ag-grid-community”导入{GridReadyEvent};

从“ ag-grid”导入{GridOptions};

从'../../../services/sdsalert.service'导入{SDSAlertService};

//从“事件”中导入{EventEmitter};

@Component（{   选择器：“ apt-entity-grid”，   templateUrl：“ ./ entity-grid.component.html”，   styleUrls：['./entity-grid.component.scss']，   changeDetection：ChangeDetectionStrategy.OnPush }）

导出类EntityGridComponent实现OnInit，OnChanges {

@HostBinding（'class.ag-grid20-context'）   hasClass = true;

@Input（）公共columnDefs：any;

@Input（）公共entityData：任何；

@Output（）公共singleRowData =新的EventEmitter（）;

@Output（）public showForm = new EventEmitter（）;

public rowSelection;   public previousRowSelected：任意；   public selectedRow：布尔值;   public rowData：any;   public gridOptions：GridOptions；   响应= [];

构造函数（私有sdsData：SDSAlertService）{
```
this.selectedRow  = false;
this.showForm.emit(false);
this.rowSelection = "multiple";
```
}

ngOnInit（）{
```
console.log(this.entityData);
```
}

ngOnChanges（）{
```
console.log(this.entityData);
 this.gridOptions = <GridOptions>{};
this.gridOptions = {
  onGridReady: () => {
      this.gridOptions.api.setRowData(this.entityData);
  }
};
```
}

onRowClicked（事件：任意）{
```
var selectedDataStringPresentation:[] ;
const selectedNodes = event.api.getSelectedNodes()  
const selectedData = selectedNodes.map( function(RowNode) { return RowNode.data })
this.singleRowData.emit(event);

if(event.node.isSelected()){
  this.singleRowData.emit(event);
  event.node.setSelected(false, false);
} else {
  event.node.setSelected(true);
}

selectedDataStringPresentation = selectedDataStringPresentation + selectedData;
if(selectedData.length === 0 || selectedData.length > 1) {
  this.showForm.emit(false);
} else {
  this.showForm.emit(true);
}
```
}

onGridReady（参数：GridReadyEvent）{     params.api.sizeColumnsToFit（）;

}

onCellClicked（事件：任意）{     console.log（'cell'，event）;   }

onSelectionChanged（事件：任意）{     console.log（'selectionchange'，event）;   }

}
1. 父组件
  快讯
```
  <apt-entity-grid [columnDefs]="columnDefs" 
                   [entityData]="rowData" 
                   (singleRowData)="rowSelected($event)" 
                   (showForm)="showForm = $event" >
  </apt-entity-grid>

</div>
```
从“ @ angular / core”导入{ChangeDetectionStrategy，Component，HostBinding，OnInit}；

从“ ag-grid-community”导入{GridReadyEvent};

从“ ../../services/sdsalert.service”导入{SDSAlertService};

从'rxjs / operators'导入{reduce，switchMap};

从'@ angular / forms'导入{FormGroup，FormBuilder，Validators};

从'../../services/entity-data.service'导入{EntityDataService};

从“ ../../services/entity-details.service”导入{EntityDetailsService};

@Component（{ 选择器：“ apt-alert”， templateUrl：“ ./ alert.component.html”， styleUrls：['./alert.component.scss']， changeDetection：ChangeDetectionStrategy.OnPush }）

导出类AlertComponent实现了OnInit {

@HostBinding（'class.ag-grid20-context'）hasClass = true; public columnDefs：任意； public rowData：any; 公共标题：字符串；公开提交：布尔值；公共alertControllerEntityDetails：任意；

form：FormGroup;

响应= [];

constructor（私有fb：FormBuilder，
```
private entityData:EntityDataService,
private entityDetails:EntityDetailsService,
private sdsAlertService: SDSAlertService) {

this.submitted = false;
this.alertControllerEntityDetails = this.entityDetails.alertEntity
this.columnDefs = this.alertControllerEntityDetails.columnDefs;

this.sdsAlertService.listAlerts().subscribe(r => {
  if (r) {
    this.response.push(...r)
    console.log( this.response);
  } else {
    // clear messages when empty message received
    this.response = [];
  }
});
this.rowData = this.response;


console.log(this.response);
this.sdsAlertService.getConfiguration().subscribe(r => {
if (r) {
console.log(r);
} else {
// clear messages when empty message received
console.log( r);
}
});
```
}

ngOnInit（）{
```
this.form = this.fb.group({
  scid: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9]*$')]],
  wsid: ['', [Validators.required,  Validators.pattern('^[a-zA-Z0-9]*$')]],
  contact: ['', [Validators.required,  Validators.pattern('^[0-9]*$')]],
  walkieTalkie: ['', [Validators.required,  Validators.pattern('^[a-zA-Z0-9-]*$')]]
});
```
}

get alertFormControls（）{     返回this.form.controls;   }

public rowSelected（event：any）：void {     this.form.setValue（event.data）;   }

save（）{     this.submitted = true;     console.log（'form'，this.form.value）;

}

}
1. 我的服务
从“ @ angular / core”导入{Injectable}；从“ @ airport / portal-shared”导入{StateService}；从'@ angular / common / http'导入{HttpClient}；从'rxjs'导入{Observable};

导出类AlertRowData {   所有者：字符串；   代码：字符串；   desc：字符串；   摘要：字符串；   严重性：字符串；   类别：数字；   alertType：字符串；   id：string;   可接受的：布尔型;   机场：任何；   customerId：string;   dataId：string;   描述：字符串；   displayable：boolean;   externalCode：string;   metaInfo：string;   产品：线； }

@Injectable（{   providerIn：'root' }）导出类SDSAlertService {   构造函数（私有http：HttpClient，私有stateService：StateService）{}

listAlerts（）：可观察{     返回this.http.get（/sds/data/v2/alert/list/${this.stateService.getAirport().id}）;   }

getConfiguration（）：可观察<[]> {     返回此内容。http.get<[]>（'/ aodb / services / environment / config / user / SDS'）;   } }

当数据到达时我如何渲染网格，现在数据到达以后。同样，当我运行它给断点时，由于延迟，网格似乎被渲染。

从API接收数据后进行Ag-grid网格渲染

0 个答案: