Servicedaten werden nicht an das kendoUI-Gitter gebunden

Question

Ich entwickle und eckige 4-Komponenten mit kendoUI. Ich verwende das KendoUI-Gitter, um die JSON-Daten anzuzeigen. Während des Debuggens kann ich sehen, dass der Dienst die Datensätze zieht. Nach meinem Wissen habe ich dieses Datagrid an die Daten gebunden, die vom Dienst korrekt zurückgegeben werden. Nicht sicher, was das Problem

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 sein könnte .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

Dies wurde behoben. Der Grund ist, weil die pageSize 0 war. Ich setze es auf 10 und es funktioniert.