Angular 2 - 无法绑定来自 HTTP Get 请求的数据

Question

我是 Angular 2 的新手，在绑定一些 JSON 数据时遇到问题。如果我在新选项卡中运行 API url 我可以看到返回的 JSON，而不是通过我的应用程序。以下是我的服务、组件和视图文件。

Service.ts

 public permission(module: string): Observable<Permissions[]> {
    return this.http
    .get('api-url')
    .map((response: Response) => {
       return <Permissions[]>response.json();
       })
}

Component.ts

_permissionsView: Permissions[];

ngOnInit() {
    this.getPermissions();
}

getPermissions() {
    this._commonService.permission('module')
    .subscribe(
        resultsArray => {
            this._permissionsView = resultsArray;
            console.log(this._permissionsView);
        },
        error => {"Error: " + error }
    )
}

Component.html

<kendo-grid [kendoGridBinding]="_permissionsView">
            ....
</kendo-grid>

我订阅有误吗？

Answer 1

这对我有用：

服务中

constructor( private http: HttpClient ) {}

getPermissions( params ) {

   const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Accept', 'application/json')

   const url = 'http://localhost:5000/api/'  

   return this.http.get(
      url + 'permissions',
      { headers: headers }
   );        
}

在控制器中

this.dataService.getPermissions(param).subscribe( 
   data => {
      console.log('data OK !');
      console.log(data);
      this._permissionsView = data;
   },
   error => {
      console.log('data error !');
   }
);

我不知道 kendo 网格对 dataSource 的期望是什么，您是否尝试将 "kendo grid selector" 包装在带有 *ngIf="_permissionsView" 的 div 中？因此它会在您的 http 调用完成后呈现。

Answer 2

这是我刚刚使用 Kendo UI.

编写的一个工作示例

它模拟网络 api 调用返回一个延迟为 1000

的可观察对象

https://stackblitz.com/edit/angular-kendo-datagrid-example

Angular 2 - 无法绑定来自 HTTP Get 请求的数据

Angular 2 - Cannot bind data from HTTP Get request

angular

typescript

get

angular2-observables