打字稿 – 如何在angular2中使用带有Observable的ag-grid？

我已经在互联网上做了很多研究,但仍然无法将它们粘合在一起.我有一个angular2应用程序,带有来自HTTP的Observable数据源,并且想要使用ag-grid.问题是我只有一个加载屏幕而不是数据.我用Fiddler调查过,数据在 JSON中成功加载并正确加载.这是我的代码：

order.service.ts

import { Injectable }    from '@angular/core';
import { Headers,Http,Response } from '@angular/http';

import { Observable }    from 'rxjs/Observable';

import { Order } from './order';

@Injectable()
export class OrderService {

  private ordersUrl = '(Some JSON data source via Internet)';  // URL to web api

  constructor(private http: Http) { } 

  getOrders(): Observable<Order[]> {
    return this.http.get(this.ordersUrl)
        .map(this.extractData)
        .catch(this.handleError);
  }

  save(order: Order): Observable<Order>  {
    if (order.id) {
      //return this.put(order);
    }
    return this.post(order);
  }

  delete(order: Order) {
    let headers = new Headers();
    headers.append('Content-Type','application/json');

    let url = `${this.ordersUrl}/${order.id}`;

    return this.http
       .delete(url,headers)
       .map(this.extractData)
       .catch(this.handleError);
  }

  // Add new Order
  private post(order: Order): Observable<Order> {
    let headers = new Headers({
      'Content-Type': 'application/json'});

    return this.http
               .post(this.ordersUrl,JSON.stringify(order),{headers: headers})
               .map(this.extractData)
               .catch(this.handleError);
  }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }

    private handleError (error: any) {
        // In a real world app,we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

order.component.ts

import { Component,OnInit } from '@angular/core';
import { Router }            from '@angular/router';

import { AgGridNg2 } from 'ag-grid-ng2/main';

import { Order }                from './order';
import { OrderService }         from './order.service';


@Component({
  selector: 'my-orders',templateUrl: 'app/order/order.html',directives: [ AgGridNg2 ]
})

export class OrderComponent implements OnInit {
    errorMessage: string;
    orders: Order[];
    selectedOrder: Order;
    addingOrder = false;
    error: any;
    mode = 'Observable';
    gridOptions: any = [];

    ngOnInit() {
        this.getOrders();
    }

    columnDefs = [(Some definition)];

    getOrders() {
        this.orderService
            .getOrders()
            .subscribe(
               orders => this.orders = orders,error =>  this.errorMessage = <any>error);
    }

    constructor(
        private router: Router,private orderService: OrderService) {
            orderService
                .getOrders()
                .subscribe(
                   orders => this.orders = orders,error =>  this.errorMessage = <any>error);

            this.gridOptions = {
                rowData: this.orders,columnDefs: this.columnDefs,enableColResize: true,enableSorting: true,enableFilter: true
            }
        }

    onSelect(order: Order) {
        this.selectedOrder = order;
        this.addingOrder = false;
    }
}

上面的代码是从Google教程中复制的,只进行了一些修改并仅用于演示.

这是HTML文件,它只包含一个ag-grid标签

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh" [gridOptions]="gridOptions">
</ag-grid-ng2>

提前谢谢你拯救我的生命.

<ag-grid-ng2 
    #agGrid 
    style="width: 100%; height: 350px;" 
    class="ag-fresh" 

   [gridOptions]="gridOptions"
   [rowData]="orders">
</ag-grid-ng2>

private orderService: OrderService) {
        orderService
            .getOrders()
            .subscribe(
                orders => { 
                    this.orders = orders;

                    this.gridOptions = {
                        rowData: this.orders,enableFilter: true
                    };
                },error =>  this.errorMessage = <any>error
            );
    }