gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:35:00 25 4
gpt4 key购买 nike

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

订单.服务.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;
}
}

以上代码是从谷歌教程复制过来的,稍作修改,仅供演示。

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

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

提前感谢您救了我的命。

最佳答案

好的,所以你的 Observable 流程在我看来很好,但你没有将订单绑定(bind)到网格:

<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 的好例子。

关于typescript - 如何在 angular2 中将 ag-grid 与 Observable 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38339379/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com