我一直在用我认为的简单代码来拉扯头发。我承认我对 typescript 和学习还很陌生,但对 javascript 更熟悉。
我基本上是使用 AG-GRID 作为我的缅因州组件来创建 SPA(单页应用程序)。我有一个服务从 REST 连接中提取数据(当前使用 JSON 服务器来模仿),并将在多个组件之间共享该数据。 AG-GRID 似乎是目前唯一拒绝正常工作的组件。我收到以下错误。
几周来我一直在互联网上寻找解决方案,但找不到符合我情况的示例。这里有人知道如何处理以下错误吗?
控制台错误:
error TS2345: Argument of type '(data: Incident_Model) => Incident_Model' is not assignable to parameter of type '(value: Incident_Model[]) => void'.
Types of parameters 'data' and 'value' are incompatible.
Type 'Incident_Model[]' is not assignable to type 'Incident_Model'.
Property 'id' is missing in type 'Incident_Model[]'.
Angular 界面:
export class Incident_Model {
id: number;
Incident: string;
status: string;
}
Angular 服务:
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { Incident_Model } from './incident_model';
const BackEnd_URL = environment.BackEnd_URL;
@Injectable()
export class BackEndService {
constructor(private http: HttpClient ) { }
getAllIncidents(): Observable<Incident_Model[]> {
return this.http.get<Incident_Model[]>(BackEnd_URL + '/Incidents');
}
}
Angular 分量:
ngOnInit() {this.backendservice.getAllIncidents().subscribe( data => this.gridOptions.api.setRowData = data )}
使用下面评论中的代码进行了更新 - 11h37 - 2018-02-07: 这是完整的组件代码,以防有人发现我缺少的东西:
import { Component, OnInit } from '@angular/core';
import { GridOptions } from "ag-grid";
import { BackEndService } from '../../Shared/back-end.service';
import { Incident_Model } from '../../Shared/incident_model';
@Component({
selector: 'app-archive',
templateUrl: './archive.component.html',
styleUrls: ['./archive.component.css']
})
export class ArchiveComponent implements OnInit {
private gridOptions: GridOptions;
constructor(private backendservice: BackEndService) {
var gridSize = 8;
var rowHeight = gridSize * 6;
var headerHeight = gridSize * 7;
this.gridOptions = <GridOptions>{
enableFilter: true,
enableColResize: true,
enableSorting: true,
pagination: true,
paginationPageSize:25,
animateRows: true,
headerHeight: headerHeight,
rowHeight:rowHeight
};
this.gridOptions.columnDefs = [
{
headerName: "Headname here",
children:[
{
headerName: "id",
field: "id",
width: 165,
filterParams: { applyButton: true, clearButton:true }
},
{
headerName: "Incident",
field: "Incident",
width: 450,
filterParams: { applyButton: true, clearButton:true }
},
{
headerName: "status",
field: "status",
width: 110,
filterParams: { applyButton: true, clearButton:true }
}
];
}
ngOnInit() {this.backendservice.getAllIncidents().subscribe(data => this.gridOptions.api.setRowData(data)) }
}
最佳答案
首先, 的数据应作为参数而不是赋值传递:
this.backendservice.getAllIncidents().subscribe(data => this.gridOptions.api.setRowData(data));
关于javascript - AG-GRID - 无法从 REST 获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48652796/