如何在 angular2 中将 ag-grid 与 Observable 一起使用？

Question

我在 Internet 上做了很多研究，但仍然无法将它们粘合在一起。我有一个 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>

提前谢谢你救了我的命。

Answer 1

好的，我觉得你的 Observable 流程很好，但你没有将订单绑定到网格：

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

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

或者您可以将 gridOptions 的设置移动到订阅回调中：

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

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

This Github Repository 有一些关于如何使用 ag-grid-ng2 的好例子。

如何在 angular2 中将 ag-grid 与 Observable 一起使用？

How can I use ag-grid with Observable in angular2?

observable

typescript

ag-grid

angular