解决方法如下:
创建ASP.NET Core OData Web服务:
Startup.cs
文件中,添加以下引用:using Microsoft.AspNet.OData.Extensions;
ConfigureServices
方法中,添加以下代码:services.AddControllers().AddOData(options => options.Count().Filter().Expand().Select().OrderBy().SetMaxTop(null).AddRouteComponents("odata", GetEdmModel()));
Configure
方法中,添加以下代码:app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.EnableDependencyInjection();
endpoints.Select().Filter().Expand().OrderBy().MaxTop(null);
endpoints.MapODataRoute("odata", "odata", GetEdmModel());
});
GetEdmModel
的私有方法,并在其中配置OData模型。private static IEdmModel GetEdmModel()
{
var builder = new ODataConventionModelBuilder();
builder.EntitySet("Products");
return builder.GetEdmModel();
}
ProductsController
的控制器,并添加以下代码:[EnableQuery]
public IActionResult Get()
{
var products = new List
{
new Product { Id = 1, Name = "Product 1", Price = 10 },
new Product { Id = 2, Name = "Product 2", Price = 20 },
new Product { Id = 3, Name = "Product 3", Price = 30 }
};
return Ok(products);
}
创建Angular 5应用程序:
ng new my-app
npm install @angular/http @odata/client
product.service.ts
的服务,并添加以下代码:import { Injectable } from '@angular/core';
import { ODataClient, ODataEntitySetResource } from '@odata/client';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class ProductService {
private odata: ODataClient;
constructor(private http: HttpClient) {
this.odata = new ODataClient('http://localhost:5000/odata');
}
getProducts(): Observable {
const products = this.odata.entitySet('Products');
return this.http.get(products.query().expand('Category').toString());
}
}
npm install --save @progress/kendo-angular-grid @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-ooxml @progress/kendo-theme-default
app.module.ts
文件中,添加以下引用和模块:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';
import { ProductService } from './product.service';
@NgModule({
imports: [BrowserModule, HttpClientModule, GridModule],
declarations: [AppComponent],
providers: [ProductService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
的组件,并添加以下代码:import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
products: any[];