我正在使用 kendoUI 开发 Angular 4 组件。我正在使用 kendoUI 网格来显示 json 数据。在调试时，我可以看到该服务正在提取记录。据我所知，我已将该数据网格正确绑定到服务返回的数据。不确定问题可能是什么
电影组件.ts
import {Component, OnInit} from '@angular/core';
import {MovieService} from './movie.service';
import {IMovie} from './movie.interface';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { MRDBGlobalConstants } from '../shared/mrdb.global.constants';
@Component({
moduleId: module.id,
selector: 'app-movie',
templateUrl: './movie.component.html',
styleUrls: ['./movie.component.css'],
providers:[MovieService]
})
export class MovieComponent implements OnInit {
public gridView : GridDataResult;
public pageSize : number;
public sort: SortDescriptor[] = [];
public skip: number = 0;
public movieResponses: IMovie[] = [];
public movieList : IMovie[];
constructor(private movieService : MovieService) {
}
ngOnInit() {
this.pageSize = MRDBGlobalConstants.GridPageSize;
this.movieService.getMovies().subscribe((result : IMovie[]) => {
this.movieList = result;
this.getMovies();
});
}
public sortChange(sort: SortDescriptor[]) : void{
this.sort = sort;
this.getMovies();
}
public pageChange(event: PageChangeEvent) : void{
this.skip = event.skip;
this.getMovies();
}
private getMovies() : void
{
var sortedSR = this.movieList;
if (this.sort && this.sort.length > 0) {
if (this.sort[0].dir === undefined) this.sort[0].dir = "asc";
sortedSR = orderBy(this.movieList, this.sort);
}
this.gridView = {
data: sortedSR.slice(this.skip, this.skip + this.pageSize),
total: this.movieList.length
};
}
}
电影服务.ts
import {Injectable} from '@angular/core';
import {MRDBCommonService} from '../shared/services/mrdb.common.service';
import {IMovie} from './movie.interface';
const URL_MOVIE = '/api/movie';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
@Injectable()
export class MovieService
{
constructor(private _mrdbCommonService: MRDBCommonService){}
getMovies(): Observable<IMovie[]> {
return Observable.of([
{
movieId: 1,
name: "Titanic",
actor: "Test1",
director: "Test2",
movieLength: 2
},
{
movieId: 2,
name: "Titanic",
actor: "Test1",
director: "Test2",
movieLength: 2
},
{
movieId: 3,
name: "Titanic",
actor: "Test1",
director: "Test2",
movieLength: 2
}
]);
}
createMovie(){
}
deleteMovie(){
}
}
电影界面.ts
export interface IMovie{
movieId:number;
name:string;
actor:string;
director:string;
movieLength:number;
}
电影.component.html
<!-- **************************
MAIN TITLE BAR
******************************* -->
<div class="section-title">
<div class="title">
<h1>Movie Results</h1>
</div>
</div>
<!-- ################### -->
<!-- MAIN CONTENT START -->
<!-- ################### -->
<section id="main-content">
<section class="wrapper">
<div class="row mt">
<div class="col-lg-12">
<div class="content-panel">
<section id="no-more-tables">
<table id="holdingTable" class="table table-bordered table-striped table-condensed cf">
<tbody>
<tr>
<td id="kendoGridHoldingColumn">
<kendo-grid #grid [data]="gridView" class="table table-bordered table-striped table-condensed cf"
[scrollable]="'none'"
[sortable]="{ mode: 'single' }"
[sort]="sort"
(sortChange)="sortChange($event)"
[(pageSize)]="pageSize"
[skip]="skip"
[pageable]="true"
(pageChange)="pageChange($event)">
<kendo-grid-column field="movieId" title="movieId" *ngIf="false">
</kendo-grid-column>
<kendo-grid-column field="name" title="Name" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
<ng-template kendoGridHeaderTemplate let-column>
Name
<i class="fa fa-sort" aria-hidden="true"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Name">
{{dataItem.name}}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="actor" title="Email" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
<ng-template kendoGridHeaderTemplate let-column>
Actor
<i class="fa fa-sort" aria-hidden="true"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Actor">
{{dataItem.actor}}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="director" title="Director" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
<ng-template kendoGridHeaderTemplate let-column>
Director
<i class="fa fa-sort" aria-hidden="true"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Director">
{{dataItem.director}}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="movieLength" title="Movie Length" data-title="Movie Length" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
<ng-template kendoGridHeaderTemplate let-column>
Movie Length
<i class="fa fa-sort" aria-hidden="true"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<span data-title="Movie Length">
{{dataItem.movieLength}}
</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</td>
</tr>
</tbody>
</table>
</section><!-- / #no-more-tables -->
</div><!-- / content-panel -->
</div><!-- / col-lg-12 -->
</div><!-- / row -->
<!-- / main content -->
</section><!-- / wrapper -->
</section><!-- / #main-content -->