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);
  });
}

以ag-grid angular4更新行数据

1 个答案: