angular2でObservableとag-gridを使用するにはどうすればよいですか？

Question

私はインターネットに関する多くの研究を行ってきましたが、これらを一緒に接着することはできません。私は、HTTPからObservableデータソースを持つangular2アプリケーションを持っていて、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-グリッドの1個のタグしか含まれていない

<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 Repositoryag-grid-ng2を使用する方法についていくつかの良い例があります。