找到解决方案，问题是在从 Observables 填充行数据之前调用“onGridReady”函数。所以实际上没有选择语句可以选择的行。
import { Component } from '@angular/core';
import {Observable} from "rxjs/Observable";
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
(gridReady)="onReady($event)"
[columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData2"
(gridReady)="onReady($event)"
[columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[gridOptions]="gridOptions"
[rowData]="rowData3"
(gridReady)="onReady($event)"
(rowDataChanged)="onRowDataChanged()"
[columnDefs]="columnDefs">
</ag-grid-angular>
`
})
export class AppComponent {
columnDefs;
rowData;
rowData2;
rowData3;
constructor() {
this.gridOptions = {
rowData: this.rowData3
};
console.log("in here");
console.log("in here");
console.log("in here");
this.columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
this.rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]
let val = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
let res : Observable<any> = Observable.create(observer => {
setTimeout(()=>{
observer.next(val);
},1);
});
res.subscribe(
resposne => {
this.rowData2 = resposne;
});
let res1 : Observable<any> = Observable.create(observer => {
setTimeout(()=>{
observer.next(val);
},2000);
});
res1.subscribe(
resposne => {
this.rowData3 = resposne;
});
}
/**
* Select the first row as default...
*/
public onRowDataChanged(): void {
this.gridOptions.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
}
private onReady(params) {
params.api.sizeColumnsToFit();
params.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
}
}
https://plnkr.co/edit/PSKnSjAo6omDAo5bjm1J.
添加了带有三个 ag-grid 的 plunker。第一个网格具有预定义的行数据值，第二个网格具有从可观察对象填充的行数据，但延迟非常小，第三个网格具有从具有较高延迟的可观察对象填充的行数据值。如果第一个和第二个“onGridReady”函数被调用并且第一行被选中，但在第三个网格的情况下，我们必须为“rowDataChanged”事件提供选择行语句以选择行。