Javascript Ag网格动态设置列和行数据

我有一个TypeScript类，我在其中调用一个方法，该方法调用后端api从服务器获取数据，并将其放入网格。目前，我有硬编码的列和行，只是为了测试我将如何做到这一点。当我像下面的例子一样放置列和行设置代码时，我正确地填充了网格

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();

this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;
    }, error => {
      console.log(error);
    });
  }

导出类组件{
私有columnDefs=[]；
私有行数据=[]；
私有网格选项：网格选项；
私人资料：任何；
构造函数（专用http:HttpClient）{
这个.getFoo（）；
this.gridOptions={}；
this.gridOptions.columnDefs=[
{headerName:'Make'，field:'Make'}，
{headerName:'Model'，字段：'Model'}，
{headerName:'Price'，字段：'Price'}
];
this.gridOptions.rowData=[
{品牌：'Toyota'，型号：'Celica'，价格：35000}，
{品牌：福特，型号：蒙迪欧，价格：32000}，
{品牌：'Porsche'，型号：'Boxter'，价格：72000}
];
}
getFoo（）{
这是http.get(`https://xxx`).订阅（响应=>{
这个数据=响应；
}，错误=>{
console.log（错误）；
});
}

但是，当我将列和行设置代码放入getFoo方法中时（我需要它），我的网格数据没有被设置，我得到了一个加载框

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;

      this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
    }, error => {
      console.log(error);
    });
  }

导出类组件{
私有columnDefs=[]；
私有行数据=[]；
私有网格选项：网格选项；
私人资料：任何；
构造函数（专用http:HttpClient）{
这个.getFoo（）；
}
getFoo（）{
这是http.get(`https://xxx`).订阅（响应=>{
这个数据=响应；
this.gridOptions={}；
this.gridOptions.columnDefs=[
{headerName:'Make'，field:'Make'}，
{headerName:'Model'，字段：'Model'}，
{headerName:'Price'，字段：'Price'}
];
this.gridOptions.rowData=[
{品牌：'Toyota'，型号：'Celica'，价格：35000}，
{品牌：福特，型号：蒙迪欧，价格：32000}，
{品牌：'Porsche'，型号：'Boxter'，价格：72000}
];
}，错误=>{
console.log（错误）；
});
}

我试图通过从getFoo返回一个承诺来解决这个问题，然后在承诺的“then”中设置列和行数据，但得到了相同的加载框

export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions: GridOptions;
  private data: any;

  constructor(private http:HttpClient ) { 
    this.getFoo();
  }

  getFoo(){
    this.http.get(`https://xxx`).subscribe(response => {
      this.data = response;

      this.gridOptions = <GridOptions>{};
          this.gridOptions.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
          ];
          this.gridOptions.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
          ];
    }, error => {
      console.log(error);
    });
  }

这是我的标记

<ag-grid-angular 
    style="width: 700px; height: 500px;" 
    class="ag-theme-balham"
    [gridOptions]="gridOptions"
    >
</ag-grid-angular>

---

有什么想法吗？

你可以这样做：

  export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions$: Observable<GridOptions>;

  constructor(private http:HttpClient ) { 
 }
 ngOnInit() { this.getFoo(); } // call it here, not in constructor

 getFoo(){ 
   this.gridOptions$ = this.http.get(`https://xxx`);
 }

<ag-grid-angular 
style="width: 700px; height: 500px;" 
class="ag-theme-balham"
[gridOptions]="gridOptions$ | async"
>

导出类组件{
私有columnDefs=[]；
私有行数据=[]；
私有网格选项$：可观察；
构造函数（专用http:HttpClient）{
}
ngOnInit（）{this.getFoo（）；}//在此处调用，而不是在构造函数中调用
getFoo（）{
this.gridOptions$=this.http.get(`https://xxx`);
}

您可以通过在http请求上执行.map和执行您的业务逻辑来转换http请求，并且可以观察到该响应

之后，只需在html中这样调用：

  export class FooComponent {
  private columnDefs = [];
  private rowData = [];
  private gridOptions$: Observable<GridOptions>;

  constructor(private http:HttpClient ) { 
 }
 ngOnInit() { this.getFoo(); } // call it here, not in constructor

 getFoo(){ 
   this.gridOptions$ = this.http.get(`https://xxx`);
 }

<ag-grid-angular 
style="width: 700px; height: 500px;" 
class="ag-theme-balham"
[gridOptions]="gridOptions$ | async"
>

---

这将异步更新模型并为您触发更改检测。

api调用返回一个我认为无法转换为gridoptions的对象列表。事实上，我按照您所述编写了代码，但我收到了以下错误：“Object”类型可分配给极少数其他类型。您是否打算改用“any”类型？类型对象“”缺少类型“Observable”中的以下属性：\ isScalar、source、operator、lift和其他6个属性。然后，您可以在ag网格周围编写包装器组件，将数据传递给它，并且在输入中，您将没有可观察的：D