After conducting extensive research on the Internet, I am still struggling to connect the pieces. My angular2 application utilizes an Observable data source from HTTP and I am attempting to integrate ag-grid. However, all I see is a loading screen instead of the expected data. Upon examining with Fiddler, it appears that the data is being successfully loaded in JSON format. Below is my code:
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;
}
}
The above code has been adapted from a Google tutorial for illustrative purposes only.
Here is the HTML file, containing one tag for ag-grid:
<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh" [gridOptions]="gridOptions">
</ag-grid-ng2>
I appreciate any assistance you can provide. Thank you for potentially saving me here.