时间戳

首页 > 解决方案 > 使用http get以角度6将数据加载到网格

jqgrid - 使用http get以角度6将数据加载到网格

问题描述

http.get我正在尝试使用角度 6将以下示例数据加载到 jqgrid(free) 。

[{"maker":"Toyota", "model":"Celica"},{ "maker": "Chrysler", "model":"Mondeo"}]

模型类

export class Model{ 
    maker : string
    model : string
}

零件：

...
@Component({...})
export class SampleComponent implements OnInit {
   private _sampleService;

  columnModel : any[];
  models : Model[];

  constructor(_sampleService : SampleService) {
        this._sampleService = _sampleService;
   }
   ngOnInit() {
      this.columnModel = [{ name: "maker" },{ name: "model" }]
      this.models = this._sampleService.getModelList().subscribe(models => this.models = models);
  }
  ngAfterViewInit() {
    (<any>jQuery("#grid")).jqGrid({
        colModel: this.columnModel,
        data: this.models
    });
  }
}

服务：

....
@Injectable()
export class SampleService{
 constructor(private http : HttpClient){}

 getModelList():Observable<Model[]>{
   return this.http.get<Model[]> 
  ("http://localhost:8090/myapp/getModel");
 }
}

如果我执行以下操作，我可以在控制台中看到数据。

this.http.get("http://localhost:8090/ducksoup/getModel")
 .subscribe(data => {console.log(data)})

但是，它不是在网格中渲染。有什么帮助吗？

标签： jqgridangular6

解决方案

您可以在获取记录后立即在 OnInit 方法中编写 jqxGrid 绑定代码，它将在 datagrid 上显示您的数据

推荐阅读