kendoUIグリッドにサービスデータがバインドされていません

Question

kendoUIを使用して開発中の角度4のコンポーネントです。私はkendoUIグリッドを使ってjsonデータを表示しています。デバッグ中は、サービスがレコードを引き出していることがわかります。私の知る限り、データグリッドはサービスによって正しく返されたデータにバインドされています。問題が

movie.component.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 
     }; 
    } 
} 

movie.service.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(){ 

    } 

} 

movie.interface.ts

export interface IMovie{ 

    movieId:number; 
    name:string; 
    actor:string; 
    director:string; 
    movieLength:number; 
} 

movie.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 &nbsp; 
                <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 &nbsp; 
                <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 &nbsp; 
                <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 &nbsp; 
                <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 --> 

Answer 1

これは解決されました。理由は、pageSizeが0だったからです。私は10に設定して動作します。