在 ag-grid angular4 中更新行数据

Question

在 AngularJS 中，我可以通过执行 `gridOptions.api.setRowData(rowData) 之类的操作来更新网格的行数据。

我现在正尝试在 Angular4 应用程序中执行此操作。我的 TS 文件有：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridModule } from 'ag-grid-angular/main';
import { GridOptions, RowNode } from 'ag-grid/main';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app a4';
  studentList = {};
  gridOptions = {};


   constructor(private http: HttpClient){
       this.gridOptions = <GridOptions>{
           context: {
               componentParent: this
           },
           columnDefs: this.createColumnDefs(),
           rowDefs: this.studentList,
       };
   }

   ngOnInit(): void {
     this.http.get('students/list').subscribe(data => {
       this.studentList = data;
       console.log(data);
       this.gridOptions.api.setRowData(this.studentList);
     });
   }

       private createColumnDefs() {
           return [
               {
                   headerName: "Name",
                   field: "name",
                   width: 400
               },
               {
                   headerName: "SSN",
                   field: "ssn",
                   width: 400,
               }
           ];
       }

}

但是，在编译时，angular-cli 不喜欢 `api.根据 AG-Grid 文档，这似乎仍然是正确的做事方式。我无法从示例中看出我缺少什么。

ERROR in C:/Projects/spring-boot-mvc-test/frontend/src/app/app.component.ts (31,25): Property 'api' does not exist on type '{}'.

Answer 1

ngOnInit 中的 gridOptions 似乎为空。 试试这个：

ngOnInit(): void {
  let that: this = this;
  this.http.get('students/list').subscribe(data => {
    this.studentList = data;
    console.log(data);
    that.gridOptions.api.setRowData(this.studentList);
  });
}