带有 Web API 数据源的 Kendo UI Grid？答案

【问题标题】：Kenodo UI Grid with Web API data source?带有 Web API 数据源的 Kendo UI Grid？
【发布时间】：2017-07-24 21:49:59
【问题描述】：

我正在创建一个在 ASP.NET Core 上运行的 Angular 应用程序，并且我想创建一个使用 Web API 数据源的网格组件。我在官方文档中找不到有关如何执行此操作的任何线索。这甚至可能吗？

谢谢。

【问题讨论】：

标签： angular asp.net-web-api kendo-ui-angular2

【解决方案1】：

当然有可能，例如：有一个共享服务从我的 API 获取信息以填充 GridDataResult

服务：

/** Includes go up here **/

@Injectable()
export class RestService {

    apiRoot = 'http://myapi/api';
    headers: Headers = new Headers();
    options: RequestOptions = new RequestOptions();

    constructor(private http: Http) {
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('charset', 'utf-8');
        this.options.headers = this.headers;
    }

    getDataFromApi(): Observable<any> {
        const callURL = `${this.uiRoot}/pathToData/`;
        const requestBody: Object = {};

        return return this.http.post(callURL, requestBody, this.options)
        .map(res => {
            return res.json().map(value => {
                return value.Result.map(item => {
                    return item;
                });
            });
        });
    }

}

然后在您的网格组件中，您应该订阅此方法并将其转换为您的GridDataResult。类似：

/** Includes go up here **/

@Component({
    selector: 'app-my-list',
    templateUrl: './account-my-list.component.html'
})
export class MyListComponent implements OnInit, OnDestroy {
    mySubscription: Subscription;

    state: State = {
        skip: 0,
        take: 50
    }

    myData: Array<any>;
    gridData: GridDataResult;

    constructor(private restService: RestService) { }

    ngOnInit() {
        this.mySubscription = this.restService.getDataFromApi().subscribe(val => {
            this.myData = val;
            this.gridData = process(this.myData, this.state);
        });
    }

    ngOnDestroy() {
        this.mySubscription.unsubscribe();
    }

    /** this is to change the state **/
    protected dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(this.myData, this.state);
    }
}

模板将类似于：

<kendo-grid 
    [data]="gridData"
    [pageSize]="state.take"
    [skip]="state.skip"
    (dataStateChange)="dataStateChange($event)">
</kendo-grid>

请注意，这只是应该如何完成的示例，您必须考虑所有特定需求并相应地执行更改，还必须进行必要的包含（对于 Http 处理、可观察对象、OnInit、Ondestroy 等）。 ) 我作为评论留下的 /** Includes go up here **/

【讨论】：